@blocklet/ui-react 2.4.28 → 2.4.30

package/lib/Dashboard/index.js

@@ -65,15 +65,16 @@ function Dashboard(_ref) {
   const {
     locale
   } = (0, _context.useLocaleContext)() || {};
-  const blocklet = Object.assign({}, window.blocklet, meta);
   const formattedBlocklet = (0, _react.useMemo)(() => {
+    const blocklet = Object.assign({}, window.blocklet, meta);
+
     try {
       return (0, _blocklets.formatBlockletInfo)(blocklet);
     } catch (e) {
       console.error('Failed to format blocklet info', e, blocklet);
       return blocklet;
     }
-  }, [blocklet]);
+  }, [meta]);
   const {
     localizedNav,
     flattened,
@@ -100,8 +101,8 @@ function Dashboard(_ref) {
     const flattened = (0, _utils.flatRecursive)(localizedNav).filter(item => !!item.url);
     const matchedIndex = (0, _utils.matchPaths)(flattened.map(item => item.url));
 
-    if (flattened !== null && flattened !== void 0 && flattened.length) {
-      flattened[matchedIndex === -1 ? 0 : matchedIndex].active = true;
+    if (matchedIndex !== -1) {
+      flattened[matchedIndex].active = true;
     }
 
     return {
@@ -130,9 +131,9 @@ function Dashboard(_ref) {
       }
     } // eslint-disable-next-line react-hooks/exhaustive-deps
 
-  }, [invalidPathFallback]);
+  }, [invalidPathFallback, flattened, matchedIndex]);
 
-  if (!blocklet.appName) {
+  if (!formattedBlocklet.appName) {
     return null;
   }
 
@@ -152,7 +153,8 @@ function Dashboard(_ref) {
     title: appName,
     fullWidth: true,
     sidebarWidth: 128,
-    legacy: false
+    legacy: false,
+    links: localizedNav
   }, rest), {}, {
     headerProps: _objectSpread({
       brand: appName,
@@ -178,8 +180,7 @@ function Dashboard(_ref) {
         })
       }),
       addons: _headerAddons
-    }, rest.headerProps),
-    links: localizedNav
+    }, rest.headerProps)
   }));
 }
 

package/lib/Footer/brand.js

@@ -73,4 +73,4 @@ Brand.defaultProps = {
   logo: '',
   description: ''
 };
-const Root = (0, _Theme.styled)('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'));
+const Root = (0, _Theme.styled)('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-of-type {\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/index.js

@@ -11,8 +11,6 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _Theme = require("@arcblock/ux/lib/Theme");
 
-var _Box = _interopRequireDefault(require("@mui/material/Box"));
-
 var _reactErrorBoundary = require("react-error-boundary");
 
 var _context = require("@arcblock/ux/lib/Locale/context");
@@ -53,7 +51,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
  * 专门用于 (composable) blocklet 的 Footer 组件, 基于 blocklet meta 中的数据渲染
  */
 function Footer(_ref) {
-  var _formattedBlocklet$na, _formattedBlocklet$na2, _formattedBlocklet$na3, _theme$background, _window, _window$blocklet;
+  var _formattedBlocklet$na, _formattedBlocklet$na2, _formattedBlocklet$na3, _theme$background;
 
   let {
     meta,
@@ -64,17 +62,18 @@ function Footer(_ref) {
   const {
     locale
   } = (0, _context.useLocaleContext)() || {};
-  const blocklet = Object.assign({}, window.blocklet, meta);
   const formattedBlocklet = (0, _react.useMemo)(() => {
+    const blocklet = Object.assign({}, window.blocklet, meta);
+
     try {
       return (0, _blocklets.formatBlockletInfo)(blocklet);
     } catch (e) {
       console.error('Failed to format blocklet info', e, blocklet);
       return blocklet;
     }
-  }, [blocklet]);
+  }, [meta]);
 
-  if (!blocklet.appName) {
+  if (!formattedBlocklet.appName) {
     return null;
   }
 
@@ -107,23 +106,11 @@ function Footer(_ref) {
       label: item.title
     }))
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_overridableThemeProvider.default, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_overridableThemeProvider.default, {
     theme: themeOverrides,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StyledInternalFooter, _objectSpread(_objectSpread(_objectSpread({}, props), rest), {}, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledInternalFooter, _objectSpread(_objectSpread(_objectSpread({}, props), rest), {}, {
       $bgcolor: theme === null || theme === void 0 ? void 0 : (_theme$background = theme.background) === null || _theme$background === void 0 ? void 0 : _theme$background.footer
-    })), /*#__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
-    })]
+    }))
   });
 }
 
@@ -136,7 +123,7 @@ Footer.defaultProps = {
   meta: {},
   theme: null
 };
-const StyledInternalFooter = (0, _Theme.styled)(_internalFooter.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\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 => {
+const StyledInternalFooter = (0, _Theme.styled)(_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/internal-footer.js

@@ -7,6 +7,8 @@ exports.default = void 0;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+
 var _brand = _interopRequireDefault(require("./brand"));
 
 var _links = _interopRequireDefault(require("./links"));
@@ -58,6 +60,8 @@ const layoutsKeyByName = layouts.reduce((acc, cur) => _objectSpread(_objectSprea
  */
 
 function InternalFooter(props) {
+  var _window, _window$blocklet;
+
   const {
     brand,
     navigation,
@@ -126,10 +130,26 @@ function InternalFooter(props) {
     throw new Error("layout ".concat(layout, " is not supported."));
   }
 
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(LayoutComponent, _objectSpread({
-    elements: elements,
-    data: props
-  }, rest));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+    position: "relative",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(LayoutComponent, _objectSpread({
+      elements: elements,
+      data: props
+    }, rest)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+      position: "absolute",
+      right: 16,
+      bottom: 0,
+      fontSize: 12,
+      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
+    })]
+  });
 }
 
 InternalFooter.propTypes = {

package/lib/Header/index.js

@@ -134,17 +134,18 @@ function Header(_ref) {
   const {
     locale
   } = (0, _context.useLocaleContext)() || {};
-  const blocklet = Object.assign({}, window.blocklet, meta);
   const formattedBlocklet = (0, _react.useMemo)(() => {
+    const blocklet = Object.assign({}, window.blocklet, meta);
+
     try {
       return (0, _blocklets.formatBlockletInfo)(blocklet);
     } catch (e) {
       console.error('Failed to format blocklet info', e, blocklet);
       return blocklet;
     }
-  }, [blocklet]);
+  }, [meta]);
 
-  if (!blocklet.appName) {
+  if (!formattedBlocklet.appName) {
     return null;
   }
 

package/lib/common/header-addons.js

@@ -95,7 +95,8 @@ function HeaderAddons(_ref) {
       addonsArray.push( /*#__PURE__*/(0, _jsxRuntime.jsx)(_SessionManager.default, _objectSpread({
         session: sessionCtx.session,
         locale: locale,
-        menu: menu
+        menu: menu,
+        showRole: true
       }, sessionManagerProps), "session-manager"));
     } // 在内置 addons 基础上定制 addons
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/ui-react",
-  "version": "2.4.28",
+  "version": "2.4.30",
   "description": "Some useful front-end web components that can be used in Blocklets.",
   "keywords": [
     "react",
@@ -30,8 +30,8 @@
     "url": "https://github.com/ArcBlock/ux/issues"
   },
   "dependencies": {
-    "@arcblock/did-connect": "^2.4.28",
-    "@arcblock/ux": "^2.4.28",
+    "@arcblock/did-connect": "^2.4.30",
+    "@arcblock/ux": "^2.4.30",
     "@emotion/react": "^11.10.0",
     "@emotion/styled": "^11.10.0",
     "@iconify/iconify": "^2.2.1",
@@ -53,5 +53,5 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "jest": "^28.1.3"
   },
-  "gitHead": "3133ed4e76d70eff05b08130fa7340dcc07611c4"
+  "gitHead": "ac31e48f3f02a3bfe0de05c41bea6fd55d3c03e1"
 }

package/src/Dashboard/index.js

@@ -20,15 +20,15 @@ function Dashboard({ meta, fallbackUrl, invalidPathFallback, headerAddons, sessi
   const user = sessionCtx?.session?.user;
   const userRole = user?.role;
   const { locale } = useLocaleContext() || {};
-  const blocklet = Object.assign({}, window.blocklet, meta);
   const formattedBlocklet = useMemo(() => {
+    const blocklet = Object.assign({}, window.blocklet, meta);
     try {
       return formatBlockletInfo(blocklet);
     } catch (e) {
       console.error('Failed to format blocklet info', e, blocklet);
       return blocklet;
     }
-  }, [blocklet]);
+  }, [meta]);
   const { localizedNav, flattened, matchedIndex } = useMemo(() => {
     let localizedNav = getLocalizedNavigation(formattedBlocklet?.navigation?.dashboard, locale) || [];
     // 根据 role 筛选 nav 数据
@@ -49,8 +49,8 @@ function Dashboard({ meta, fallbackUrl, invalidPathFallback, headerAddons, sessi
     // 展平后使用 matchPaths 检测 link#active 状态
     const flattened = flatRecursive(localizedNav).filter((item) => !!item.url);
     const matchedIndex = matchPaths(flattened.map((item) => item.url));
-    if (flattened?.length) {
-      flattened[matchedIndex === -1 ? 0 : matchedIndex].active = true;
+    if (matchedIndex !== -1) {
+      flattened[matchedIndex].active = true;
     }
     return { localizedNav, flattened, matchedIndex };
   }, [formattedBlocklet, locale, userRole]);
@@ -74,9 +74,9 @@ function Dashboard({ meta, fallbackUrl, invalidPathFallback, headerAddons, sessi
       }
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [invalidPathFallback]);
+  }, [invalidPathFallback, flattened, matchedIndex]);
 
-  if (!blocklet.appName) {
+  if (!formattedBlocklet.appName) {
     return null;
   }
   const { did, appLogo, appName } = formattedBlocklet;
@@ -94,6 +94,7 @@ function Dashboard({ meta, fallbackUrl, invalidPathFallback, headerAddons, sessi
       fullWidth
       sidebarWidth={128}
       legacy={false}
+      links={localizedNav}
       {...rest}
       headerProps={{
         brand: appName,
@@ -115,7 +116,6 @@ function Dashboard({ meta, fallbackUrl, invalidPathFallback, headerAddons, sessi
         addons: _headerAddons,
         ...rest.headerProps,
       }}
-      links={localizedNav}
     />
   );
 }

package/src/Footer/brand.js

@@ -40,7 +40,7 @@ const Root = styled('div')`
     text-decoration: none;
     color: inherit;
   }
-  > div:first-child {
+  > div:first-of-type {
     display: flex;
     align-items: center;
   }

package/src/Footer/index.js

@@ -1,7 +1,6 @@
 import { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { styled } from '@arcblock/ux/lib/Theme';
-import Box from '@mui/material/Box';
 import { withErrorBoundary } from 'react-error-boundary';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { ErrorFallback } from '@arcblock/ux/lib/ErrorBoundary';
@@ -18,16 +17,16 @@ import { blockletMetaProps } from '../types';
  */
 function Footer({ meta, theme: themeOverrides, ...rest }) {
   const { locale } = useLocaleContext() || {};
-  const blocklet = Object.assign({}, window.blocklet, meta);
   const formattedBlocklet = useMemo(() => {
+    const blocklet = Object.assign({}, window.blocklet, meta);
     try {
       return formatBlockletInfo(blocklet);
     } catch (e) {
       console.error('Failed to format blocklet info', e, blocklet);
       return blocklet;
     }
-  }, [blocklet]);
-  if (!blocklet.appName) {
+  }, [meta]);
+  if (!formattedBlocklet.appName) {
     return null;
   }
 
@@ -62,13 +61,6 @@ function Footer({ meta, theme: themeOverrides, ...rest }) {
   return (
     <OverridableThemeProvider theme={themeOverrides}>
       <StyledInternalFooter {...props} {...rest} $bgcolor={theme?.background?.footer} />
-      <Box
-        position="absolute"
-        right={0}
-        bottom={0}
-        sx={{ color: 'transparent', '::selection': { background: '#000', color: '#fff' } }}>
-        {window?.blocklet?.version}
-      </Box>
     </OverridableThemeProvider>
   );
 }
@@ -85,7 +77,6 @@ Footer.defaultProps = {
 };
 
 const StyledInternalFooter = styled(InternalFooter)`
-  position: relative;
   border-top: 1px solid #eee;
   color: ${(props) => props.theme.palette.grey[600]};
   ${({ $bgcolor }) => $bgcolor && `background-color: ${$bgcolor};`}

package/src/Footer/internal-footer.js

@@ -1,4 +1,5 @@
 import PropTypes from 'prop-types';
+import Box from '@mui/material/Box';
 import Brand from './brand';
 import Links from './links';
 import SocialMedia from './social-media';
@@ -65,7 +66,19 @@ function InternalFooter(props) {
   if (!LayoutComponent) {
     throw new Error(`layout ${layout} is not supported.`);
   }
-  return <LayoutComponent elements={elements} data={props} {...rest} />;
+  return (
+    <Box position="relative">
+      <LayoutComponent elements={elements} data={props} {...rest} />
+      <Box
+        position="absolute"
+        right={16}
+        bottom={0}
+        fontSize={12}
+        sx={{ color: 'transparent', '::selection': { background: '#000', color: '#fff' } }}>
+        {window?.blocklet?.version}
+      </Box>
+    </Box>
+  );
 }
 
 InternalFooter.propTypes = {

package/src/Header/index.js

@@ -62,17 +62,17 @@ const parseNavigation = (navigation) => {
 // eslint-disable-next-line no-shadow
 function Header({ meta, addons, sessionManagerProps, homeLink, theme: themeOverrides, ...rest }) {
   const { locale } = useLocaleContext() || {};
-  const blocklet = Object.assign({}, window.blocklet, meta);
   const formattedBlocklet = useMemo(() => {
+    const blocklet = Object.assign({}, window.blocklet, meta);
     try {
       return formatBlockletInfo(blocklet);
     } catch (e) {
       console.error('Failed to format blocklet info', e, blocklet);
       return blocklet;
     }
-  }, [blocklet]);
+  }, [meta]);
 
-  if (!blocklet.appName) {
+  if (!formattedBlocklet.appName) {
     return null;
   }
   const { did, appLogo, appName, theme } = formattedBlocklet;

package/src/common/header-addons.js

@@ -51,6 +51,7 @@ export default function HeaderAddons({ formattedBlocklet, addons, sessionManager
           session={sessionCtx.session}
           locale={locale}
           menu={menu}
+          showRole
           {...sessionManagerProps}
         />
       );