@blocklet/ui-react 2.2.3 → 2.4.0

package/lib/Dashboard/index.js

@@ -0,0 +1,127 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("react");
+
+var _reactRouterDom = require("react-router-dom");
+
+var _context = require("@arcblock/ux/lib/Locale/context");
+
+var _dashboard = _interopRequireDefault(require("@arcblock/ux/lib/Layout/dashboard"));
+
+var _Address = _interopRequireDefault(require("@arcblock/did-connect/lib/Address"));
+
+var _Avatar = _interopRequireDefault(require("@arcblock/did-connect/lib/Avatar"));
+
+var _types = require("../types");
+
+var _blocklets = require("../blocklets");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+const _excluded = ["meta"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+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; }
+
+/**
+ * 专门用于 (composable) blocklet 的 Dashboard 组件, 解析 blocklet meta 中 section 为 dashboard 的 navigation 数据, 渲染一个 UX Dashboard
+ */
+function Dashboard(_ref) {
+  var _formattedBlocklet$na;
+
+  let {
+    meta
+  } = _ref,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  const {
+    locale
+  } = (0, _context.useLocaleContext)() || {};
+  const blocklet = Object.assign({}, window.blocklet, meta);
+  const formattedBlocklet = (0, _react.useMemo)(() => {
+    try {
+      return (0, _blocklets.formatBlockletInfo)(blocklet);
+    } catch (e) {
+      console.error('Failed to format blocklet info', e, blocklet);
+      return blocklet;
+    }
+  }, [blocklet]);
+
+  if (!blocklet.appName) {
+    return null;
+  }
+
+  const {
+    did,
+    appLogo,
+    appName
+  } = formattedBlocklet;
+  let localizedNav = (0, _blocklets.getLocalizedNavigation)(formattedBlocklet === null || formattedBlocklet === void 0 ? void 0 : (_formattedBlocklet$na = formattedBlocklet.navigation) === null || _formattedBlocklet$na === void 0 ? void 0 : _formattedBlocklet$na.dashboard, locale) || [];
+  localizedNav = localizedNav.map(item => _objectSpread(_objectSpread({}, item), {}, {
+    url: item.link,
+    label: item.title,
+    icon: item.icon ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: "iconify",
+      "data-icon": item.icon
+    }) : null
+  }));
+  const allLinks = [...(rest.links || []), localizedNav]; // https://github.com/ArcBlock/ux/issues/755#issuecomment-1208692620
+
+  allLinks.flat().forEach(item => {
+    item.external = true;
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_dashboard.default, _objectSpread(_objectSpread({
+    title: appName,
+    fullWidth: true,
+    sidebarWidth: 128,
+    legacy: false
+  }, rest), {}, {
+    headerProps: _objectSpread({
+      brand: appName,
+      description: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Address.default, {
+        compact: true,
+        responsive: false,
+        copyable: false,
+        prepend: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.default, {
+          did: did,
+          size: 16,
+          style: {
+            marginRight: 4
+          }
+        }),
+        children: did
+      }),
+      logo: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRouterDom.Link, {
+        to: _blocklets.publicPath,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+          src: appLogo,
+          alt: "logo"
+        })
+      })
+    }, rest.headerProps),
+    links: allLinks
+  }));
+}
+
+Dashboard.propTypes = {
+  meta: _types.blockletMetaProps
+};
+Dashboard.defaultProps = {
+  meta: {}
+};
+var _default = Dashboard;
+exports.default = _default;

package/lib/Footer/brand.js

@@ -9,16 +9,20 @@ var _react = require("react");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var _styles = require("@mui/material/styles");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
+var _templateObject;
+
 const _excluded = ["name", "logo", "description"];
 
 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(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; }
@@ -75,7 +79,4 @@ Brand.defaultProps = {
   description: ''
 };
 
-const Root = _styledComponents.default.div.withConfig({
-  displayName: "brand__Root",
-  componentId: "sc-6z2c3k-0"
-})(["display:flex;flex-direction:column;font-size:14px;a{text-decoration:none;color:inherit;}> div:first-child{display:flex;align-items:center;}.footer-brand-logo{display:flex;align-items:center;margin-right:16px;line-height:1;img,svg{width:auto;height:44px;max-height:44px;}}.footer-brand-name{font-size:16px;font-weight:bold;}.footer-brand-desc{margin-top:16px;}", "{width:auto;}", "{.footer-brand-logo{img,svg{height:32px;max-height:32px;}}}"], props => props.$theme.breakpoints.down('sm'), props => props.$theme.breakpoints.down('md'));
+const Root = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  font-size: 14px;\n  a {\n    text-decoration: none;\n    color: inherit;\n  }\n  > div:first-child {\n    display: flex;\n    align-items: center;\n  }\n  .footer-brand-logo {\n    display: flex;\n    align-items: center;\n    margin-right: 16px;\n    line-height: 1;\n    img,\n    svg {\n      width: auto;\n      height: 44px;\n      max-height: 44px;\n    }\n  }\n  .footer-brand-name {\n    font-size: 16px;\n    font-weight: bold;\n  }\n  .footer-brand-desc {\n    margin-top: 16px;\n  }\n\n  ", " {\n    width: auto;\n  }\n\n  ", " {\n    .footer-brand-logo {\n      img,\n      svg {\n        height: 32px;\n        max-height: 32px;\n      }\n    }\n  }\n"])), props => props.$theme.breakpoints.down('sm'), props => props.$theme.breakpoints.down('md'));

package/lib/Footer/copyright.js

@@ -7,14 +7,18 @@ exports.default = Copyright;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
+var _templateObject;
+
 const _excluded = ["owner", "year"];
 
 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(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; }
@@ -46,7 +50,4 @@ Copyright.defaultProps = {
   year: "".concat(new Date().getFullYear())
 };
 
-const Root = _styledComponents.default.p.withConfig({
-  displayName: "copyright__Root",
-  componentId: "sc-g2r3zf-0"
-})(["margin:0;font-size:13px;"]);
+const Root = _styled.default.p(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  margin: 0;\n  font-size: 13px;\n"])));

package/lib/Footer/index.js

@@ -7,7 +7,7 @@ exports.default = void 0;
 
 var _react = require("react");
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var _styles = require("@mui/material/styles");
 
@@ -27,10 +27,14 @@ var _types = require("../types");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
+var _templateObject;
+
 const _excluded = ["meta"];
 
 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(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; }
@@ -111,10 +115,7 @@ Footer.propTypes = {
 Footer.defaultProps = {
   meta: {}
 };
-const StyledInternalFooter = (0, _styledComponents.default)(_internalFooter.default).withConfig({
-  displayName: "Footer__StyledInternalFooter",
-  componentId: "sc-1iwl1nd-0"
-})(["border-top:1px solid #eee;color:", ";", " font-family:Lato,Avenir,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol';"], props => props.$theme.palette.grey[600], _ref2 => {
+const StyledInternalFooter = (0, _styled.default)(_internalFooter.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border-top: 1px solid #eee;\n  color: ", ";\n  ", "\n  font-family: Lato, Avenir, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif,\n    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';\n"])), props => props.$theme.palette.grey[600], _ref2 => {
   let {
     $bgcolor
   } = _ref2;

package/lib/Footer/layout/plain.js

@@ -9,16 +9,20 @@ var _react = require("react");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var _Container = _interopRequireDefault(require("@mui/material/Container"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
+var _templateObject;
+
 const _excluded = ["elements"];
 
 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(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; }
@@ -59,10 +63,7 @@ PlainLayout.propTypes = {
   }).isRequired
 };
 
-const Root = _styledComponents.default.div.withConfig({
-  displayName: "plain__Root",
-  componentId: "sc-qoddfp-0"
-})(["padding:24px 0;border-top:1px solid #eee;.plain-layout-container{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;}"]);
+const Root = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding: 24px 0;\n  border-top: 1px solid #eee;\n  .plain-layout-container {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    flex-wrap: wrap;\n    gap: 8px;\n  }\n"])));
 
 var _default = PlainLayout;
 exports.default = _default;

package/lib/Footer/layout/row.js

@@ -7,7 +7,7 @@ exports.default = Row;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var _styles = require("@mui/material/styles");
 
@@ -15,10 +15,14 @@ var _clsx = _interopRequireDefault(require("clsx"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
+var _templateObject;
+
 const _excluded = ["children", "autoCenter"];
 
 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(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; }
@@ -60,7 +64,4 @@ Row.defaultProps = {
   autoCenter: false
 };
 
-const RowRoot = _styledComponents.default.div.withConfig({
-  displayName: "row__RowRoot",
-  componentId: "sc-1b3lw4c-0"
-})(["display:flex;justify-content:space-between;& + &{margin-top:24px;}&.footer-row-auto-center > *:only-child{margin:0 auto;}", "{align-items:stretch;flex-direction:column;gap:16px;> *{flex:1 0 100%;}&.footer-row-auto-center > *{margin:0 auto;}}"], props => props.$theme.breakpoints.down('md'));
+const RowRoot = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  & + & {\n    margin-top: 24px;\n  }\n  &.footer-row-auto-center > *:only-child {\n    margin: 0 auto;\n  }\n\n  ", " {\n    align-items: stretch;\n    flex-direction: column;\n    gap: 16px;\n    > * {\n      flex: 1 0 100%;\n    }\n    &.footer-row-auto-center > * {\n      margin: 0 auto;\n    }\n  }\n"])), props => props.$theme.breakpoints.down('md'));

package/lib/Footer/layout/standard.js

@@ -7,7 +7,7 @@ exports.default = void 0;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var _Box = _interopRequireDefault(require("@mui/material/Box"));
 
@@ -17,10 +17,14 @@ var _row = _interopRequireDefault(require("./row"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
+var _templateObject;
+
 const _excluded = ["elements"];
 
 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(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; }
@@ -75,10 +79,7 @@ Footer.propTypes = {
   }).isRequired
 };
 
-const Root = _styledComponents.default.div.withConfig({
-  displayName: "standard__Root",
-  componentId: "sc-13y30cb-0"
-})(["padding:48px 0;"]);
+const Root = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding: 48px 0;\n"])));
 
 var _default = Footer;
 exports.default = _default;

package/lib/Footer/links.js

@@ -9,7 +9,7 @@ var _react = require("react");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var _styles = require("@mui/material/styles");
 
@@ -17,10 +17,14 @@ var _clsx = _interopRequireDefault(require("clsx"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
+var _templateObject;
+
 const _excluded = ["links", "flowLayout"];
 
 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(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; }
@@ -133,7 +137,4 @@ Links.defaultProps = {
   flowLayout: false
 };
 
-const Root = _styledComponents.default.div.withConfig({
-  displayName: "links__Root",
-  componentId: "sc-19wysi2-0"
-})(["overflow:hidden;color:", ";.footer-links-inner{display:flex;justify-content:space-between;margin:0 -8px;}.footer-links-group,.footer-links-sub{display:flex;flex-direction:column;}.footer-links-item{display:inline-block;padding:0 8px;font-size:14px;line-height:1.6;}.footer-links-group + .footer-links-group{margin-left:128px;}&.footer-links--grouped{.footer-links-group{> .footer-links-item{font-weight:bold;}.footer-links-sub{margin-top:8px;}}}a{color:inherit;text-decoration:none;&:hover{text-decoration:underline;}}&.footer-links--flow{display:inline-flex;.footer-links-inner{justify-content:center;flex-wrap:wrap;margin:0 -8px;.footer-links-item{padding:0 8px;}}}", "{.footer-links-group + .footer-links-group{margin-left:56px;}}", "{.footer-links-group + .footer-links-group{margin-left:40px;}}", "{.footer-links-inner{flex-direction:column;margin:0;}.footer-links-sub{display:none;}.footer-links-group{padding:12px 0;border-top:1px solid ", ";}.footer-links-group + .footer-links-group{margin-left:0;}.footer-links-group--active{.footer-links-sub{display:flex;flex-direction:row;flex-wrap:wrap;.footer-links-item{flex:0 0 50%;}}}.footer-links-item{padding:0;font-size:13px;}&.footer-links--grouped{.footer-links-group{> .footer-links-item{font-size:14px;}}}&.footer-links--flow{.footer-links-inner{flex-direction:row;}}}"], props => props.$theme.palette.grey[600], props => props.$theme.breakpoints.down('lg'), props => props.$theme.breakpoints.down('lg'), props => props.$theme.breakpoints.down('sm'), props => props.$theme.palette.grey[200]);
+const Root = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  overflow: hidden;\n  color: ", ";\n  .footer-links-inner {\n    display: flex;\n    justify-content: space-between;\n    margin: 0 -8px;\n  }\n  .footer-links-group,\n  .footer-links-sub {\n    display: flex;\n    flex-direction: column;\n  }\n  .footer-links-item {\n    display: inline-block;\n    padding: 0 8px;\n    font-size: 14px;\n    line-height: 1.6;\n  }\n  .footer-links-group + .footer-links-group {\n    margin-left: 128px;\n  }\n  &.footer-links--grouped {\n    .footer-links-group {\n      > .footer-links-item {\n        font-weight: bold;\n      }\n      .footer-links-sub {\n        margin-top: 8px;\n      }\n    }\n  }\n  a {\n    color: inherit;\n    text-decoration: none;\n    &:hover {\n      text-decoration: underline;\n    }\n  }\n\n  &.footer-links--flow {\n    display: inline-flex;\n    .footer-links-inner {\n      justify-content: center;\n      flex-wrap: wrap;\n      margin: 0 -8px;\n      .footer-links-item {\n        padding: 0 8px;\n      }\n    }\n  }\n\n  ", " {\n    .footer-links-group + .footer-links-group {\n      margin-left: 56px;\n    }\n  }\n\n  ", " {\n    .footer-links-group + .footer-links-group {\n      margin-left: 40px;\n    }\n  }\n\n  ", " {\n    .footer-links-inner {\n      flex-direction: column;\n      margin: 0;\n    }\n    .footer-links-sub {\n      display: none;\n    }\n    .footer-links-group {\n      padding: 12px 0;\n      border-top: 1px solid ", ";\n    }\n    .footer-links-group + .footer-links-group {\n      margin-left: 0;\n    }\n    .footer-links-group--active {\n      .footer-links-sub {\n        display: flex;\n        flex-direction: row;\n        flex-wrap: wrap;\n        .footer-links-item {\n          flex: 0 0 50%;\n        }\n      }\n    }\n    .footer-links-item {\n      padding: 0;\n      font-size: 13px;\n    }\n    &.footer-links--grouped {\n      .footer-links-group {\n        > .footer-links-item {\n          font-size: 14px;\n        }\n      }\n    }\n\n    &.footer-links--flow {\n      .footer-links-inner {\n        flex-direction: row;\n      }\n    }\n  }\n"])), props => props.$theme.palette.grey[600], props => props.$theme.breakpoints.down('lg'), props => props.$theme.breakpoints.down('lg'), props => props.$theme.breakpoints.down('sm'), props => props.$theme.palette.grey[200]);

package/lib/Footer/social-media.js

@@ -7,7 +7,7 @@ exports.default = SocialMedia;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var _styles = require("@mui/material/styles");
 
@@ -15,10 +15,14 @@ var _Icon = _interopRequireDefault(require("../Icon"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
+var _templateObject;
+
 const _excluded = ["items"];
 
 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(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; }
@@ -77,7 +81,4 @@ SocialMedia.defaultProps = {
   items: null
 };
 
-const Root = _styledComponents.default.div.withConfig({
-  displayName: "social-media__Root",
-  componentId: "sc-w4ariy-0"
-})(["display:inline-flex;align-items:center;a + a{margin-left:12px;}"]);
+const Root = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline-flex;\n  align-items: center;\n  a + a {\n    margin-left: 12px;\n  }\n"])));

package/lib/Header/index.js

@@ -11,7 +11,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var _styles = require("@mui/material/styles");
 
@@ -45,10 +45,14 @@ var _utils = require("../utils");
 
 var _blocklets = require("../blocklets");
 
+var _templateObject;
+
 const _excluded = ["meta", "addons", "sessionManagerProps", "homeLink"];
 
 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 _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; }
@@ -261,10 +265,7 @@ Header.defaultProps = {
   },
   homeLink: _blocklets.publicPath
 };
-const StyledUxHeader = (0, _styledComponents.default)(_Header.ResponsiveHeader).withConfig({
-  displayName: "Header__StyledUxHeader",
-  componentId: "sc-kcf4st-0"
-})(["", " font-family:Lato,Avenir,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol';.header-logo{min-width:44px;}", "{.header-logo{min-width:32px;}}.header-nav{.navmenu-sub .navmenu-item{min-width:80px;}}"], _ref3 => {
+const StyledUxHeader = (0, _styled.default)(_Header.ResponsiveHeader)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n  font-family: Lato, Avenir, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif,\n    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';\n  .header-logo {\n    min-width: 44px;\n  }\n  ", " {\n    .header-logo {\n      min-width: 32px;\n    }\n  }\n  .header-nav {\n    .navmenu-sub .navmenu-item {\n      min-width: 80px;\n    }\n  }\n  .header-nav.navmenu--horizontal {\n    .navmenu-root > .navmenu-sub,\n    .navmenu-root > .navmenu-item {\n      padding: 16px 4px;\n    }\n  }\n"])), _ref3 => {
   let {
     $bgcolor
   } = _ref3;

package/lib/blocklets.js

@@ -7,7 +7,7 @@ exports.publicPath = exports.parseNavigation = exports.getLocalizedNavigation =
 
 var _utils = require("./utils");
 
-var _window, _window$blocklet;
+var _window, _window$blocklet, _window2, _window2$blocklet;
 
 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; }
 
@@ -15,7 +15,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 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 publicPath = ((_window = window) === null || _window === void 0 ? void 0 : (_window$blocklet = _window.blocklet) === null || _window$blocklet === void 0 ? void 0 : _window$blocklet.prefix) || '/';
+const publicPath = ((_window = window) === null || _window === void 0 ? void 0 : (_window$blocklet = _window.blocklet) === null || _window$blocklet === void 0 ? void 0 : _window$blocklet.groupPrefix) || ((_window2 = window) === null || _window2 === void 0 ? void 0 : (_window2$blocklet = _window2.blocklet) === null || _window2$blocklet === void 0 ? void 0 : _window2$blocklet.prefix) || '/';
 /**
  * 格式化 theme (目前仅考虑 background)
  */
@@ -90,7 +90,9 @@ const parseNavigation = navigation => {
     // 对应 footer social media
     social: [],
     // 对应 footer 底部 links
-    bottom: []
+    bottom: [],
+    // 对应 dashboard#sidenav 导航
+    dashboard: []
   }; // 对 navigation 顶层元素按 section 分组
 
   navigation.forEach(item => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/ui-react",
-  "version": "2.2.3",
+  "version": "2.4.0",
   "description": "Some useful front-end web components that can be used in Blocklets.",
   "keywords": [
     "react",
@@ -30,13 +30,14 @@
     "url": "https://github.com/ArcBlock/ux/issues"
   },
   "dependencies": {
-    "@arcblock/did-connect": "^2.2.3",
-    "@arcblock/ux": "^2.2.3",
+    "@arcblock/did-connect": "^2.4.0",
+    "@arcblock/ux": "^2.4.0",
+    "@emotion/react": "^11.10.0",
+    "@emotion/styled": "^11.10.0",
     "@iconify/iconify": "^2.2.1",
-    "@mui/material": "^5.9.3",
+    "@mui/material": "^5.10.0",
     "core-js": "^3.24.1",
-    "react-error-boundary": "^3.1.4",
-    "styled-components": "^5.3.5"
+    "react-error-boundary": "^3.1.4"
   },
   "peerDependencies": {
     "react": ">=18.1.0"
@@ -49,9 +50,8 @@
     "@babel/core": "^7.18.10",
     "@babel/preset-env": "^7.18.10",
     "@babel/preset-react": "^7.18.6",
-    "babel-plugin-styled-components": "^1.13.3",
     "eslint-plugin-react-hooks": "^4.6.0",
     "jest": "^24.9.0"
   },
-  "gitHead": "8fe2ac5bc92d997e2df3547237e3fa44b76c91aa"
+  "gitHead": "202771a046cab27fc550d31e73588075a90c75fd"
 }

package/src/Dashboard/index.js

@@ -0,0 +1,81 @@
+import { useMemo } from 'react';
+import { Link } from 'react-router-dom';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import UxDashboard from '@arcblock/ux/lib/Layout/dashboard';
+import DidAddress from '@arcblock/did-connect/lib/Address';
+import DidAvatar from '@arcblock/did-connect/lib/Avatar';
+import { blockletMetaProps } from '../types';
+import { publicPath, formatBlockletInfo, getLocalizedNavigation } from '../blocklets';
+
+/**
+ * 专门用于 (composable) blocklet 的 Dashboard 组件, 解析 blocklet meta 中 section 为 dashboard 的 navigation 数据, 渲染一个 UX Dashboard
+ */
+function Dashboard({ meta, ...rest }) {
+  const { locale } = useLocaleContext() || {};
+  const blocklet = Object.assign({}, window.blocklet, meta);
+  const formattedBlocklet = useMemo(() => {
+    try {
+      return formatBlockletInfo(blocklet);
+    } catch (e) {
+      console.error('Failed to format blocklet info', e, blocklet);
+      return blocklet;
+    }
+  }, [blocklet]);
+
+  if (!blocklet.appName) {
+    return null;
+  }
+
+  const { did, appLogo, appName } = formattedBlocklet;
+  let localizedNav = getLocalizedNavigation(formattedBlocklet?.navigation?.dashboard, locale) || [];
+  localizedNav = localizedNav.map((item) => ({
+    ...item,
+    url: item.link,
+    label: item.title,
+    icon: item.icon ? <span className="iconify" data-icon={item.icon} /> : null,
+  }));
+  const allLinks = [...(rest.links || []), localizedNav];
+  // https://github.com/ArcBlock/ux/issues/755#issuecomment-1208692620
+  allLinks.flat().forEach((item) => {
+    item.external = true;
+  });
+
+  return (
+    <UxDashboard
+      title={appName}
+      fullWidth
+      sidebarWidth={128}
+      legacy={false}
+      {...rest}
+      headerProps={{
+        brand: appName,
+        description: (
+          <DidAddress
+            compact
+            responsive={false}
+            copyable={false}
+            prepend={<DidAvatar did={did} size={16} style={{ marginRight: 4 }} />}>
+            {did}
+          </DidAddress>
+        ),
+        logo: (
+          <Link to={publicPath}>
+            <img src={appLogo} alt="logo" />
+          </Link>
+        ),
+        ...rest.headerProps,
+      }}
+      links={allLinks}
+    />
+  );
+}
+
+Dashboard.propTypes = {
+  meta: blockletMetaProps,
+};
+
+Dashboard.defaultProps = {
+  meta: {},
+};
+
+export default Dashboard;

package/src/Footer/brand.js

@@ -1,6 +1,6 @@
 import { isValidElement } from 'react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import { useTheme } from '@mui/material/styles';
 
 export default function Brand({ name, logo, description, ...rest }) {

package/src/Footer/copyright.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 
 export default function Copyright({ owner, year, ...rest }) {
   return (

package/src/Footer/index.js

@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import { useTheme } from '@mui/material/styles';
 import { withErrorBoundary } from 'react-error-boundary';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';

package/src/Footer/layout/plain.js

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

package/src/Footer/layout/row.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 clsx from 'clsx';
 

package/src/Footer/layout/standard.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 Row from './row';

package/src/Footer/links.js

@@ -1,7 +1,7 @@
 /* eslint-disable react/no-array-index-key */
 import { useState } from 'react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import { useTheme } from '@mui/material/styles';
 import clsx from 'clsx';
 

package/src/Footer/social-media.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 Icon from '../Icon';
 

package/src/Header/index.js

@@ -2,7 +2,7 @@ import { useContext, useMemo, createElement } from 'react';
 // FIXME: 直接从 react 中 import  Fragment 可能会在 vite 下出错，先暂时从 react/jsx-runtime 导入 Fragment 来跳过这个问题
 import { Fragment } from 'react/jsx-runtime';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import { ThemeProvider } from '@mui/material/styles';
 import { withErrorBoundary } from 'react-error-boundary';
 import { ErrorFallback } from '@arcblock/ux/lib/ErrorBoundary';
@@ -200,6 +200,12 @@ const StyledUxHeader = styled(ResponsiveHeader)`
       min-width: 80px;
     }
   }
+  .header-nav.navmenu--horizontal {
+    .navmenu-root > .navmenu-sub,
+    .navmenu-root > .navmenu-item {
+      padding: 16px 4px;
+    }
+  }
 `;
 
 export default withErrorBoundary(Header, {

package/src/blocklets.js

@@ -1,6 +1,6 @@
 import { mapRecursive } from './utils';
 
-export const publicPath = window?.blocklet?.prefix || '/';
+export const publicPath = window?.blocklet?.groupPrefix || window?.blocklet?.prefix || '/';
 
 /**
  * 格式化 theme (目前仅考虑 background)
@@ -61,6 +61,8 @@ export const parseNavigation = (navigation) => {
     social: [],
     // 对应 footer 底部 links
     bottom: [],
+    // 对应 dashboard#sidenav 导航
+    dashboard: [],
   };
 
   // 对 navigation 顶层元素按 section 分组