@arcblock/ux 2.4.11 → 2.4.14

package/lib/ActionButton/index.js

@@ -11,6 +11,8 @@ var _Button = _interopRequireDefault(require("../Button"));
 
 var _Util = require("../Util");
 
+var _deprecate = require("../Util/deprecate");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 const _excluded = ["href", "icon", "size", "color", "theme", "variant", "gradient", "children", "text"];
@@ -96,5 +98,9 @@ ActionButton.defaultProps = {
   size: 'large',
   children: null
 };
-var _default = ActionButton;
+
+var _default = (0, _deprecate.withDeprecated)(ActionButton, {
+  name: 'ActionButton'
+});
+
 exports.default = _default;

package/lib/Alert/index.js

@@ -19,6 +19,8 @@ var _Colors = _interopRequireDefault(require("../Colors"));
 
 var _Theme = require("../Theme");
 
+var _deprecate = require("../Util/deprecate");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 var _templateObject;
@@ -120,6 +122,11 @@ Alert.defaultProps = {
   style: '{}',
   variant: 'border'
 };
-var _default = Alert;
+
+var _default = (0, _deprecate.withDeprecated)(Alert, {
+  name: 'Alert',
+  alternative: '@mui/material/Alert'
+});
+
 exports.default = _default;
 const Container = (0, _Theme.styled)('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  font-size: 16px;\n  margin: 0;\n  padding: 16px;\n  margin: 16px 0;\n\n  strong {\n    margin: 0 5px;\n  }\n\n  .alert-icon {\n    margin-right: 16px;\n  }\n\n  .alert-content {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n  }\n"])));

package/lib/Badge/index.js

@@ -15,6 +15,8 @@ var _Colors = _interopRequireDefault(require("../Colors"));
 
 var _Util = require("../Util");
 
+var _deprecate = require("../Util/deprecate");
+
 var _Theme = require("../Theme");
 
 var _jsxRuntime = require("react/jsx-runtime");
@@ -98,9 +100,12 @@ Badge.defaultProps = {
   style: '{}'
 };
 
-var _default = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Badge, _objectSpread(_objectSpread({}, props), {}, {
+var _default = (0, _deprecate.withDeprecated)( /*#__PURE__*/(0, _react.forwardRef)((props, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Badge, _objectSpread(_objectSpread({}, props), {}, {
   forwardedRef: ref
-})));
+}))), {
+  name: 'Badge',
+  alternative: '@arcblock/ux/lib/Tag'
+});
 
 exports.default = _default;
 const Span = (0, _Theme.styled)(_Typography.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  && {\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    padding: 2px 10px;\n    height: 24px;\n    line-height: 24px;\n  }\n"])));

package/lib/ContactForm/index.js

@@ -18,6 +18,8 @@ var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularPr
 
 var _Util = require("../Util");
 
+var _deprecate = require("../Util/deprecate");
+
 var _Button = _interopRequireDefault(require("../Button"));
 
 var _Theme = require("../Theme");
@@ -108,6 +110,7 @@ class ContactForm extends _react.default.Component {
     this.fields.forEach(x => {
       this.state[x] = '';
     });
+    (0, _deprecate.warn)('ContactForm');
   }
 
   deriveProps() {

package/lib/Earth/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = Earth;
+exports.default = void 0;
 
 var _react = require("react");
 
@@ -21,6 +21,8 @@ var _countries = _interopRequireDefault(require("./countries.json"));
 
 var _util = _interopRequireDefault(require("./util"));
 
+var _deprecate = require("../Util/deprecate");
+
 var _Theme = require("../Theme");
 
 var _jsxRuntime = require("react/jsx-runtime");
@@ -447,5 +449,11 @@ Earth.defaultProps = {
   activeMarkerId: undefined,
   colors: {}
 };
+
+var _default = (0, _deprecate.withDeprecated)(Earth, {
+  name: 'Earth'
+});
+
+exports.default = _default;
 const Container = (0, _Theme.styled)('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background-color: ", ";\n  width: ", "px;\n  height: ", "px;\n  position: relative;\n  animation-name: zoomIn;\n  animation-duration: 1s;\n  animation-iteration-count: 1;\n  animation-timing-function: ease;\n  user-select: none;\n\n  .defs {\n    height: 0;\n    width: 0;\n  }\n\n  .frame {\n    fill: none;\n    pointer-events: all;\n  }\n\n  .country {\n    fill: ", ";\n    stroke: ", ";\n    stroke-width: 0.5px;\n    transition: fill 300ms ease;\n\n    &:hover {\n      fill: ", ";\n    }\n  }\n\n  .country--active {\n    fill: ", ";\n  }\n\n  .globe {\n    fill: ", ";\n    stroke: rgba(255, 255, 255, 0.5);\n    stroke-width: 0.25px;\n  }\n\n  .graticule {\n    fill: none;\n    stroke: ", ";\n  }\n\n  .star {\n    fill: #fff;\n    stroke: rgba(255, 255, 255, 0.5);\n    stroke-width: 0.25px;\n  }\n\n  .marker {\n    .marker__outer {\n      fill-opacity: 0;\n      animation: scaleIn 2s infinite ease-in-out;\n    }\n  }\n\n  @keyframes zoomIn {\n    from {\n      opacity: 0;\n      transform: scale3d(0.1, 0.1, 0.1);\n    }\n\n    50% {\n      opacity: 1;\n    }\n  }\n\n  @keyframes scaleIn {\n    from {\n      fill-opacity: 0.3;\n      transform: scale3d(0.5, 0.5, 0.5);\n    }\n    to {\n      fill-opacity: 0;\n      transform: scale3d(1.5, 1.5, 1.5);\n    }\n  }\n"])), props => props.theme === 'light' ? '#f7f7f7' : '#222', props => props.width, props => props.height, props => props.colors.land, props => props.colors.border, props => props.colors.activeLand, props => props.colors.activeLand, props => props.colors.ocean, props => props.colors.graticule);
 const Tooltip = (0, _Theme.styled)('div')(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: absolute;\n  width: auto;\n  min-width: 90px;\n  max-width: 320px;\n  padding: 8px 12px;\n  font-size: 14px;\n  background-color: #4a4a4a;\n  border-radius: 2px;\n  animation-name: fadeIn;\n  animation-duration: 250ms;\n  animation-iteration-count: 1;\n  animation-timing-function: ease;\n\n  .title,\n  .description {\n    margin: 0;\n    font-size: 16px;\n    color: #fff;\n  }\n\n  .description {\n    margin-top: ", "px;\n    color: #fff;\n    font-size: 12px;\n  }\n\n  @keyframes fadeIn {\n    from {\n      opacity: 0;\n    }\n\n    to {\n      opacity: 1;\n    }\n  }\n"])), props => props.theme.spacing(1));

package/lib/Footer/index.js

@@ -11,6 +11,8 @@ var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 
 var _Container = _interopRequireDefault(require("@mui/material/Container"));
 
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+
 var _Util = require("../Util");
 
 var _Logo = _interopRequireDefault(require("../Logo"));
@@ -26,6 +28,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
 function Footer(props) {
+  var _window, _window$blocklet;
+
   const newProps = (0, _Util.mergeProps)(props, Footer, ['dark', 'style']);
   const {
     className,
@@ -37,11 +41,11 @@ function Footer(props) {
   const endYearString = "".concat(new Date().getFullYear());
   const copyStartString = "".concat(copyStart);
   const copyYear = endYearString === copyStartString ? endYearString : "".concat(copyStartString, "-").concat(endYearString);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Container, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Container, {
     className: className,
     style: style,
     dark: dark,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Container.default, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Container.default, {
       maxWidth: false,
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Typography.default, {
         component: "div",
@@ -70,7 +74,19 @@ function Footer(props) {
           })]
         })]
       })
-    })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+      position: "absolute",
+      right: 0,
+      bottom: 0,
+      sx: {
+        color: 'transparent',
+        '::selection': {
+          background: '#000',
+          color: '#fff'
+        }
+      },
+      children: (_window = window) === null || _window === void 0 ? void 0 : (_window$blocklet = _window.blocklet) === null || _window$blocklet === void 0 ? void 0 : _window$blocklet.version
+    })]
   });
 }
 
@@ -88,7 +104,7 @@ Footer.defaultProps = {
   className: '',
   style: {}
 };
-const Container = (0, _Theme.styled)('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  margin-top: 64px;\n  padding: 24px 0 32px;\n  border-top: 1px solid ", ";\n  box-sizing: border-box;\n  width: 100%;\n\n  @media (max-width: 540px) {\n    padding: 8px 0;\n  }\n\n  .footer {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n\n    .footer-item {\n      color: ", ";\n      display: flex;\n      align-items: center;\n      flex-wrap: wrap;\n      font-size: 0.9rem;\n    }\n\n    .footer-brand {\n      margin-left: 8px;\n      margin-right: 8px;\n    }\n\n    .logo-container {\n      margin-left: 24px;\n      width: 90px;\n      opacity: 0.5;\n    }\n\n    @media (max-width: 540px) {\n      .footer-item {\n        font-size: 0.7rem;\n      }\n\n      .logo-container {\n        margin: 0 0 0 16px;\n        width: 70px;\n        height: 40px;\n      }\n    }\n\n    @media (max-width: 380px) {\n      .footer-item {\n        font-size: 0.65rem;\n      }\n\n      .logo-container {\n        margin: 0 0 0 8px;\n        height: 24px;\n      }\n    }\n  }\n"])), props => props.dark ? props.theme.palette.grey[900] : '#dee2e7', _ref => {
+const Container = (0, _Theme.styled)('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  margin-top: 64px;\n  padding: 24px 0 32px;\n  border-top: 1px solid ", ";\n  box-sizing: border-box;\n  width: 100%;\n\n  @media (max-width: 540px) {\n    padding: 8px 0;\n  }\n\n  .footer {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n\n    .footer-item {\n      color: ", ";\n      display: flex;\n      align-items: center;\n      flex-wrap: wrap;\n      font-size: 0.9rem;\n    }\n\n    .footer-brand {\n      margin-left: 8px;\n      margin-right: 8px;\n    }\n\n    .logo-container {\n      margin-left: 24px;\n      width: 90px;\n      opacity: 0.5;\n    }\n\n    @media (max-width: 540px) {\n      .footer-item {\n        font-size: 0.7rem;\n      }\n\n      .logo-container {\n        margin: 0 0 0 16px;\n        width: 70px;\n        height: 40px;\n      }\n    }\n\n    @media (max-width: 380px) {\n      .footer-item {\n        font-size: 0.65rem;\n      }\n\n      .logo-container {\n        margin: 0 0 0 8px;\n        height: 24px;\n      }\n    }\n  }\n"])), props => props.dark ? props.theme.palette.grey[900] : '#dee2e7', _ref => {
   let {
     theme,
     dark

package/lib/Icon/index.js

@@ -13,6 +13,8 @@ var _Colors = _interopRequireDefault(require("../Colors"));
 
 var _Theme = require("../Theme");
 
+var _deprecate = require("../Util/deprecate");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 var _templateObject;
@@ -94,8 +96,11 @@ Icon.defaultProps = {
 };
 const Span = (0, _Theme.styled)('span')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: ", "px;\n  height: ", "px;\n  border-radius: 50%;\n  border: 1px solid ", ";\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  .fa,\n  .fas,\n  .fal,\n  .far {\n    line-height: ", "px;\n  }\n"])), props => props.size * 2, props => props.size * 2, props => props.color, props => props.size);
 
-var _default = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, _objectSpread(_objectSpread({}, props), {}, {
+var _default = (0, _deprecate.withDeprecated)( /*#__PURE__*/(0, _react.forwardRef)((props, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, _objectSpread(_objectSpread({}, props), {}, {
   forwardedRef: ref
-})));
+}))), {
+  name: 'Icon',
+  alternative: 'SVG icons'
+});
 
 exports.default = _default;

package/lib/Layout/dashboard/{with-external-link.js → external-link.js}

@@ -3,14 +3,19 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.NavLink = exports.Link = void 0;
-exports.withExternalLink = withExternalLink;
+exports.Link = Link;
+exports.NavLink = NavLink;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _reactRouterDom = require("react-router-dom");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-const _excluded = ["to", "external"];
+const _excluded = ["children", "routerLinkComponent", "to", "external"],
+      _excluded2 = ["className"];
+
+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; }
 
@@ -22,35 +27,64 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 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; }
 
-// 包裹 router Link/NavLink 组件, 支持 external link (external 为 true 时通过 click 事件跳转)
-function withExternalLink(RouterLinkComponent) {
-  // eslint-disable-next-line react/prop-types
-  return function WithExternalLink(_ref) {
-    let {
-      to,
-      external
-    } = _ref,
-        rest = _objectWithoutProperties(_ref, _excluded);
-
-    const handleClick = e => {
-      e.preventDefault();
-      window.location.href = to;
-    };
-
-    if (external) {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(RouterLinkComponent, _objectSpread({
-        onClick: handleClick,
-        to: to
-      }, rest));
-    }
-
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(RouterLinkComponent, _objectSpread({
-      to: to
-    }, rest));
-  };
+// 包裹 router Link/NavLink 组件, 支持 external link (external 为 true 时渲染为 a 标签)
+function ExternalLink(_ref) {
+  let {
+    children,
+    routerLinkComponent: RouterLinkComponent,
+    to,
+    external
+  } = _ref,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  if (external) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("a", _objectSpread(_objectSpread({
+      href: to
+    }, rest), {}, {
+      children: children
+    }));
+  }
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(RouterLinkComponent, _objectSpread(_objectSpread({
+    to: to
+  }, rest), {}, {
+    children: children
+  }));
 }
 
-const Link = withExternalLink(_reactRouterDom.Link);
-exports.Link = Link;
-const NavLink = withExternalLink(_reactRouterDom.NavLink);
-exports.NavLink = NavLink;
+ExternalLink.propTypes = {
+  children: _propTypes.default.any.isRequired,
+  routerLinkComponent: _propTypes.default.elementType.isRequired,
+  external: _propTypes.default.bool,
+  to: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]).isRequired
+};
+ExternalLink.defaultProps = {
+  external: false
+};
+
+function Link(props) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ExternalLink, _objectSpread({
+    routerLinkComponent: _reactRouterDom.Link
+  }, props));
+}
+
+function NavLink(_ref2) {
+  let {
+    className
+  } = _ref2,
+      rest = _objectWithoutProperties(_ref2, _excluded2);
+
+  // NavLink#className 支持 function
+  const classes = rest.external && typeof className === 'function' ? className({}) : className;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ExternalLink, _objectSpread({
+    routerLinkComponent: _reactRouterDom.NavLink,
+    className: classes
+  }, rest));
+}
+
+NavLink.propTypes = {
+  className: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.func])
+};
+NavLink.defaultProps = {
+  className: ''
+};

package/lib/Layout/dashboard/index.js

@@ -31,10 +31,10 @@ var _Footer = _interopRequireDefault(require("../../Footer"));
 
 var _sidebar = _interopRequireDefault(require("./sidebar"));
 
-var _withExternalLink = require("./with-external-link");
-
 var _Theme = require("../../Theme");
 
+var _externalLink = require("./external-link");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 var _templateObject, _templateObject2;
@@ -80,12 +80,13 @@ function formatLinks(links, location) {
     }
 
     return _objectSpread(_objectSpread({}, link), {}, {
-      label: /*#__PURE__*/(0, _jsxRuntime.jsx)(_withExternalLink.Link, {
-        external: link.external,
+      label: /*#__PURE__*/(0, _jsxRuntime.jsx)(_externalLink.Link, {
         to: link.url,
+        external: link.external,
         children: link.title
       }),
-      active: !!(0, _reactRouterDom.matchPath)({
+      // external = true 时 active 状态由传入 links 的调用方决定 (适用于 blocklet ui dashboard 的情况)
+      active: link.external ? link.active : !!(0, _reactRouterDom.matchPath)({
         path: link.url,
         end: false
       }, location.pathname)

package/lib/Layout/dashboard/sidebar.js

@@ -13,10 +13,10 @@ var _colors = require("@mui/material/colors");
 
 var _clsx = _interopRequireDefault(require("clsx"));
 
-var _withExternalLink = require("./with-external-link");
-
 var _Theme = require("../../Theme");
 
+var _externalLink = require("./external-link");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 var _templateObject;
@@ -64,17 +64,21 @@ function renderLinksItem(item) {
     icon,
     title,
     showBadge,
-    external
-  } = item;
+    external,
+    active
+  } = item; // external = true 时 link active 状态由传入 links 的调用方决定 (适用于 blocklet ui dashboard 的情况)
+
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_withExternalLink.NavLink, {
-      to: url,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_externalLink.NavLink, {
       external: external,
+      to: url,
       className: _ref => {
         let {
           isActive
         } = _ref;
-        return isActive ? 'layout-sidebar-link layout-sidebar-link--active' : 'layout-sidebar-link';
+        return (0, _clsx.default)('layout-sidebar-link', {
+          'layout-sidebar-link--active': external ? active : isActive
+        });
       },
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
         className: "layout-sidebar-icon ".concat(showBadge ? 'layout-sidebar-badge' : ''),

package/lib/Locale/context.js

@@ -56,11 +56,26 @@ const getLocaleFromSearchParams = function getLocaleFromSearchParams() {
   return null;
 };
 
+const setLocaleParam = function setLocaleParam(locale) {
+  let url = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : window.location.href;
+  const urlObj = new URL(url);
+  const hasLocaleParam = urlObj.searchParams.has('locale');
+
+  if (hasLocaleParam) {
+    urlObj.searchParams.set('locale', locale);
+    window.history.replaceState({}, '', urlObj.href);
+  }
+};
+
 const getLocale = locale => locale || getLocaleFromSearchParams() || _jsCookie.default.get(cookieName) || (0, _browserLang.default)(langParams);
 
 exports.getLocale = getLocale;
 
-const setLocale = locale => _jsCookie.default.set(cookieName, locale, (0, _Util.getCookieOptions)());
+const setLocale = locale => {
+  _jsCookie.default.set(cookieName, locale, (0, _Util.getCookieOptions)());
+
+  setLocaleParam(locale);
+};
 
 exports.setLocale = setLocale;
 

package/lib/PageScroller/index.js

@@ -17,6 +17,8 @@ var _isNull = _interopRequireDefault(require("lodash/isNull"));
 
 var _usePrevValue = _interopRequireDefault(require("./usePrevValue"));
 
+var _deprecate = require("../Util/deprecate");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -318,5 +320,9 @@ PageScroller.defaultProps = {
   renderAllPagesOnFirstRender: false,
   customPageNumber: undefined
 };
-var _default = PageScroller;
+
+var _default = (0, _deprecate.withDeprecated)(PageScroller, {
+  name: 'PageScroller'
+});
+
 exports.default = _default;

package/lib/PricingTable/index.js

@@ -13,6 +13,8 @@ var _PricingPlan = _interopRequireDefault(require("./PricingPlan"));
 
 var _Theme = require("../Theme");
 
+var _deprecate = require("../Util/deprecate");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 var _templateObject;
@@ -53,7 +55,10 @@ function PricingTable(_ref) {
   return null;
 }
 
-var _default = PricingTable;
+var _default = (0, _deprecate.withDeprecated)(PricingTable, {
+  name: 'PricingTable'
+});
+
 exports.default = _default;
 PricingTable.propTypes = {
   plans: _propTypes.default.array.isRequired

package/lib/Spinner/index.js

@@ -3,10 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = Spinner;
+exports.default = void 0;
 
 var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
 
+var _deprecate = require("../Util/deprecate");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -34,4 +36,11 @@ function Spinner(props) {
   }
 
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, _objectSpread({}, _props));
-}
+}
+
+var _default = (0, _deprecate.withDeprecated)(Spinner, {
+  name: 'Spinner',
+  alternative: '@mui/material/CircularProgress'
+});
+
+exports.default = _default;

package/lib/TextCollapse/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = TextCollapse;
+exports.default = void 0;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -11,6 +11,8 @@ var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 
 var _Theme = require("../Theme");
 
+var _deprecate = require("../Util/deprecate");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 var _templateObject;
@@ -92,4 +94,10 @@ TextCollapse.defaultProps = {
   scaleFactor: 0.45,
   fontType: 'normal'
 };
+
+var _default = (0, _deprecate.withDeprecated)(TextCollapse, {
+  name: 'TextCollapse'
+});
+
+exports.default = _default;
 const Container = (0, _Theme.styled)(_Typography.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: start;\n  cursor: pointer;\n  white-space: nowrap;\n  overflow: hidden;\n\n  .start-part,\n  .end-part {\n    display: inline-block;\n    vertical-align: bottom;\n    white-space: nowrap;\n    overflow: hidden;\n  }\n  .start-part {\n    max-width: calc(100% - ", ");\n    min-width: ", ";\n    text-overflow: ellipsis;\n  }\n  .end-part {\n    max-width: calc(100% - ", ");\n    direction: rtl;\n  }\n"])), props => props.endwidth, props => props.startwidth, props => props.startwidth);

package/lib/Util/deprecate.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.withDeprecated = exports.warn = void 0;
+
+var _react = require("react");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+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 warn = (name, alternative) => {
+  var _console;
+
+  if (process.env.NODE_ENV === 'production') {
+    return;
+  }
+
+  if (typeof ((_console = console) === null || _console === void 0 ? void 0 : _console.warn) === 'function') {
+    if (alternative) {
+      console.warn("DEPRECATED: ".concat(name, " is deprecated, use ").concat(alternative, " instead."));
+    } else {
+      console.warn("DEPRECATED: ".concat(name, " is deprecated."));
+    }
+  }
+};
+
+exports.warn = warn;
+
+const withDeprecated = (Component, _ref) => {
+  let {
+    name,
+    alternative
+  } = _ref;
+  return function Deprecated(props) {
+    (0, _react.useEffect)(() => {
+      warn(name, alternative);
+    }, []);
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, _objectSpread({}, props));
+  };
+};
+
+exports.withDeprecated = withDeprecated;

package/package.json

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

package/src/ActionButton/index.js

@@ -2,6 +2,7 @@ import PropTypes from 'prop-types';
 
 import Button from '../Button';
 import { mergeProps } from '../Util';
+import { withDeprecated } from '../Util/deprecate';
 
 function ActionButton(props) {
   const newProps = mergeProps(props, ActionButton);
@@ -61,4 +62,4 @@ ActionButton.defaultProps = {
   children: null,
 };
 
-export default ActionButton;
+export default withDeprecated(ActionButton, { name: 'ActionButton' });

package/src/Alert/index.js

@@ -6,6 +6,7 @@ import Icon from '../Icon';
 import { mergeProps } from '../Util';
 import colors from '../Colors';
 import { styled } from '../Theme';
+import { withDeprecated } from '../Util/deprecate';
 
 const types = {
   error: {
@@ -72,7 +73,7 @@ Alert.defaultProps = {
   variant: 'border',
 };
 
-export default Alert;
+export default withDeprecated(Alert, { name: 'Alert', alternative: '@mui/material/Alert' });
 
 const Container = styled('div')`
   display: flex;

package/src/Badge/index.js

@@ -4,6 +4,7 @@ import Typography from '@mui/material/Typography';
 
 import colors from '../Colors';
 import { mergeProps } from '../Util';
+import { withDeprecated } from '../Util/deprecate';
 import { styled } from '../Theme';
 
 const types = {
@@ -56,7 +57,10 @@ Badge.defaultProps = {
   style: '{}',
 };
 
-export default forwardRef((props, ref) => <Badge {...props} forwardedRef={ref} />);
+export default withDeprecated(
+  forwardRef((props, ref) => <Badge {...props} forwardedRef={ref} />),
+  { name: 'Badge', alternative: '@arcblock/ux/lib/Tag' }
+);
 
 const Span = styled(Typography)`
   && {

package/src/ContactForm/index.js

@@ -7,6 +7,7 @@ import Typography from '@mui/material/Typography';
 import CircularProgress from '@mui/material/CircularProgress';
 
 import { mergeProps } from '../Util';
+import { warn as deprecatedWarn } from '../Util/deprecate';
 import Button from '../Button';
 import { styled } from '../Theme';
 
@@ -69,6 +70,7 @@ export default class ContactForm extends React.Component {
     this.fields.forEach((x) => {
       this.state[x] = '';
     });
+    deprecatedWarn('ContactForm');
   }
 
   deriveProps() {

package/src/Earth/index.js

@@ -8,6 +8,7 @@ import versor from 'versor';
 
 import json from './countries.json';
 import util from './util';
+import { withDeprecated } from '../Util/deprecate';
 import { styled } from '../Theme';
 
 const geoJson = topojson.feature(json, json.objects.ne_110m_admin_0_countries);
@@ -51,16 +52,7 @@ function stateReducer(state, action) {
   }
 }
 
-export default function Earth({
-  theme,
-  width,
-  height,
-  enableRotation,
-  rotationSpeed,
-  markers,
-  activeMarkerId,
-  colors,
-}) {
+function Earth({ theme, width, height, enableRotation, rotationSpeed, markers, activeMarkerId, colors }) {
   Object.assign(colors, themes[theme]);
   const [state, dispatch] = useReducer(stateReducer, {
     rotation: [0, 0, 0],
@@ -371,6 +363,8 @@ Earth.defaultProps = {
   colors: {},
 };
 
+export default withDeprecated(Earth, { name: 'Earth' });
+
 const Container = styled('div')`
   background-color: ${(props) => (props.theme === 'light' ? '#f7f7f7' : '#222')};
   width: ${(props) => props.width}px;

package/src/Footer/index.js

@@ -2,6 +2,7 @@
 import PropTypes from 'prop-types';
 import Typography from '@mui/material/Typography';
 import MuiContainer from '@mui/material/Container';
+import Box from '@mui/material/Box';
 
 import { mergeProps } from '../Util';
 import Logo from '../Logo';
@@ -29,6 +30,13 @@ export default function Footer(props) {
           </Typography>
         </Typography>
       </MuiContainer>
+      <Box
+        position="absolute"
+        right={0}
+        bottom={0}
+        sx={{ color: 'transparent', '::selection': { background: '#000', color: '#fff' } }}>
+        {window?.blocklet?.version}
+      </Box>
     </Container>
   );
 }
@@ -50,6 +58,7 @@ Footer.defaultProps = {
 };
 
 const Container = styled('div')`
+  position: relative;
   margin-top: 64px;
   padding: 24px 0 32px;
   border-top: 1px solid ${(props) => (props.dark ? props.theme.palette.grey[900] : '#dee2e7')};

package/src/Icon/index.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 
 import colors from '../Colors';
 import { styled } from '../Theme';
+import { withDeprecated } from '../Util/deprecate';
 
 const variants = {
   light: 'fal',
@@ -67,4 +68,7 @@ const Span = styled('span')`
   }
 `;
 
-export default forwardRef((props, ref) => <Icon {...props} forwardedRef={ref} />);
+export default withDeprecated(
+  forwardRef((props, ref) => <Icon {...props} forwardedRef={ref} />),
+  { name: 'Icon', alternative: 'SVG icons' }
+);

package/src/Layout/dashboard/external-link.js

@@ -0,0 +1,47 @@
+import PropTypes from 'prop-types';
+import { Link as RouterLink, NavLink as RouterNavLink } from 'react-router-dom';
+
+// 包裹 router Link/NavLink 组件, 支持 external link (external 为 true 时渲染为 a 标签)
+function ExternalLink({ children, routerLinkComponent: RouterLinkComponent, to, external, ...rest }) {
+  if (external) {
+    return (
+      <a href={to} {...rest}>
+        {children}
+      </a>
+    );
+  }
+  return (
+    <RouterLinkComponent to={to} {...rest}>
+      {children}
+    </RouterLinkComponent>
+  );
+}
+
+ExternalLink.propTypes = {
+  children: PropTypes.any.isRequired,
+  routerLinkComponent: PropTypes.elementType.isRequired,
+  external: PropTypes.bool,
+  to: PropTypes.oneOfType([PropTypes.string, PropTypes.object]).isRequired,
+};
+
+ExternalLink.defaultProps = {
+  external: false,
+};
+
+export function Link(props) {
+  return <ExternalLink routerLinkComponent={RouterLink} {...props} />;
+}
+
+export function NavLink({ className, ...rest }) {
+  // NavLink#className 支持 function
+  const classes = rest.external && typeof className === 'function' ? className({}) : className;
+  return <ExternalLink routerLinkComponent={RouterNavLink} className={classes} {...rest} />;
+}
+
+NavLink.propTypes = {
+  className: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+};
+
+NavLink.defaultProps = {
+  className: '',
+};

package/src/Layout/dashboard/index.js

@@ -11,8 +11,8 @@ import { ResponsiveHeader } from '../../Header';
 import NavMenu from '../../NavMenu';
 import Footer from '../../Footer';
 import Sidebar from './sidebar';
-import { Link } from './with-external-link';
 import { styled, useTheme } from '../../Theme';
+import { Link } from './external-link';
 
 // 监听 location 变化并关闭 header 中的 menu (确保 drawer - disablePortal:false, keepMounted:true)
 // 直接监听 menu 中 link 点击来触发 closeMenu 会有问题 (Suspense & lazy)
@@ -34,11 +34,12 @@ function formatLinks(links, location) {
     return {
       ...link,
       label: (
-        <Link external={link.external} to={link.url}>
+        <Link to={link.url} external={link.external}>
           {link.title}
         </Link>
       ),
-      active: !!matchPath({ path: link.url, end: false }, location.pathname),
+      // external = true 时 active 状态由传入 links 的调用方决定 (适用于 blocklet ui dashboard 的情况)
+      active: link.external ? link.active : !!matchPath({ path: link.url, end: false }, location.pathname),
     };
   });
 }

package/src/Layout/dashboard/sidebar.js

@@ -3,9 +3,8 @@ import PropTypes from 'prop-types';
 import Typography from '@mui/material/Typography';
 import { teal } from '@mui/material/colors';
 import clsx from 'clsx';
-
-import { NavLink } from './with-external-link';
 import { styled } from '../../Theme';
+import { NavLink } from './external-link';
 
 // 渲染 links, 为 group links 添加分隔线, 返回展平后的、包含分隔线元素的 links 数组
 function renderLinks(links) {
@@ -25,14 +24,15 @@ function renderLinksItem(item) {
   if (Array.isArray(item)) {
     return item.map(renderLinksItem);
   }
-  const { url, icon, title, showBadge, external } = item;
+  const { url, icon, title, showBadge, external, active } = item;
+  // external = true 时 link active 状态由传入 links 的调用方决定 (适用于 blocklet ui dashboard 的情况)
   return (
     <li key={url}>
       <NavLink
-        to={url}
         external={external}
+        to={url}
         className={({ isActive }) =>
-          isActive ? 'layout-sidebar-link layout-sidebar-link--active' : 'layout-sidebar-link'
+          clsx('layout-sidebar-link', { 'layout-sidebar-link--active': external ? active : isActive })
         }>
         <span className={`layout-sidebar-icon ${showBadge ? 'layout-sidebar-badge' : ''}`}>{icon}</span>
         <Typography component="span" className="layout-sidebar-link-text">

package/src/Locale/context.js

@@ -25,9 +25,21 @@ const getLocaleFromSearchParams = (url = window.location.href) => {
   return null;
 };
 
+const setLocaleParam = (locale, url = window.location.href) => {
+  const urlObj = new URL(url);
+  const hasLocaleParam = urlObj.searchParams.has('locale');
+  if (hasLocaleParam) {
+    urlObj.searchParams.set('locale', locale);
+    window.history.replaceState({}, '', urlObj.href);
+  }
+};
+
 const getLocale = (locale) =>
   locale || getLocaleFromSearchParams() || Cookie.get(cookieName) || browserLang(langParams);
-const setLocale = (locale) => Cookie.set(cookieName, locale, getCookieOptions());
+const setLocale = (locale) => {
+  Cookie.set(cookieName, locale, getCookieOptions());
+  setLocaleParam(locale);
+};
 
 const replace = (template, data) =>
   template.replace(/{(\w*)}/g, (m, key) => (data.hasOwnProperty(key) ? data[key] : ''));

package/src/PageScroller/index.js

@@ -6,6 +6,7 @@ import isNil from 'lodash/isNil';
 import isNull from 'lodash/isNull';
 
 import usePrevious from './usePrevValue';
+import { withDeprecated } from '../Util/deprecate';
 
 const Events = {
   TOUCHMOVE: 'touchmove',
@@ -325,4 +326,4 @@ PageScroller.defaultProps = {
   customPageNumber: undefined,
 };
 
-export default PageScroller;
+export default withDeprecated(PageScroller, { name: 'PageScroller' });

package/src/PricingTable/index.js

@@ -3,6 +3,7 @@ import Grid from '@mui/material/Grid';
 
 import PricingPlan from './PricingPlan';
 import { styled } from '../Theme';
+import { withDeprecated } from '../Util/deprecate';
 
 function PricingTable({ plans }) {
   if (plans && plans.length > 0) {
@@ -22,7 +23,7 @@ function PricingTable({ plans }) {
   return null;
 }
 
-export default PricingTable;
+export default withDeprecated(PricingTable, { name: 'PricingTable' });
 
 PricingTable.propTypes = {
   plans: PropTypes.array.isRequired,

package/src/Spinner/index.js

@@ -1,4 +1,5 @@
 import CircularProgress from '@mui/material/CircularProgress';
+import { withDeprecated } from '../Util/deprecate';
 
 /**
  * Spinner
@@ -8,7 +9,7 @@ import CircularProgress from '@mui/material/CircularProgress';
  * - 之前 size prop 是 array 类型, 需要与 CircularProgress#size 兼容
  * - color 默认使用 #4598fa, 如果调用方传入了 color prop 或 style#color, 则默认 color 被覆盖
  */
-export default function Spinner(props) {
+function Spinner(props) {
   const _props = { ...props };
   // 兼容之前的 size prop (设置外圈/内圈的尺寸)
   if (_props.size && Array.isArray(_props.size)) {
@@ -16,3 +17,5 @@ export default function Spinner(props) {
   }
   return <CircularProgress {..._props} />;
 }
+
+export default withDeprecated(Spinner, { name: 'Spinner', alternative: '@mui/material/CircularProgress' });

package/src/TextCollapse/index.js

@@ -2,17 +2,9 @@ import PropTypes from 'prop-types';
 import Typography from '@mui/material/Typography';
 
 import { styled } from '../Theme';
+import { withDeprecated } from '../Util/deprecate';
 
-export default function TextCollapse({
-  children,
-  startChars,
-  endChars,
-  scaleFactor,
-  maxWidth,
-  style,
-  fontType,
-  ...rest
-}) {
+function TextCollapse({ children, startChars, endChars, scaleFactor, maxWidth, style, fontType, ...rest }) {
   if (typeof children !== 'string') {
     return null;
   }
@@ -59,6 +51,8 @@ TextCollapse.defaultProps = {
   fontType: 'normal',
 };
 
+export default withDeprecated(TextCollapse, { name: 'TextCollapse' });
+
 const Container = styled(Typography)`
   display: inline-flex;
   align-items: center;

package/src/Util/deprecate.js

@@ -0,0 +1,25 @@
+import { useEffect } from 'react';
+
+const warn = (name, alternative) => {
+  if (process.env.NODE_ENV === 'production') {
+    return;
+  }
+  if (typeof console?.warn === 'function') {
+    if (alternative) {
+      console.warn(`DEPRECATED: ${name} is deprecated, use ${alternative} instead.`);
+    } else {
+      console.warn(`DEPRECATED: ${name} is deprecated.`);
+    }
+  }
+};
+
+const withDeprecated = (Component, { name, alternative }) => {
+  return function Deprecated(props) {
+    useEffect(() => {
+      warn(name, alternative);
+    }, []);
+    return <Component {...props} />;
+  };
+};
+
+export { warn, withDeprecated };

package/src/Layout/dashboard/with-external-link.js

@@ -1,20 +0,0 @@
-import { Link as RouterLink, NavLink as RouterNavLink } from 'react-router-dom';
-
-// 包裹 router Link/NavLink 组件, 支持 external link (external 为 true 时通过 click 事件跳转)
-export function withExternalLink(RouterLinkComponent) {
-  // eslint-disable-next-line react/prop-types
-  return function WithExternalLink({ to, external, ...rest }) {
-    const handleClick = (e) => {
-      e.preventDefault();
-      window.location.href = to;
-    };
-    if (external) {
-      return <RouterLinkComponent onClick={handleClick} to={to} {...rest} />;
-    }
-    return <RouterLinkComponent to={to} {...rest} />;
-  };
-}
-
-export const Link = withExternalLink(RouterLink);
-
-export const NavLink = withExternalLink(RouterNavLink);