@blocklet/ui-react 2.13.70 → 3.0.0

package/lib/{contexts → packages/blocklet-ui-react/src/contexts}/config-user-space.d.ts

@@ -18,10 +18,10 @@ interface ConfigUserSpaceContextType {
     settingStorageEndpoint: SettingStorageEndpoint;
     hasStorageEndpoint: boolean;
 }
-declare const ConfigUserSpaceContext: import("react").Context<ConfigUserSpaceContextType>;
-declare const Consumer: import("react").Consumer<ConfigUserSpaceContextType>;
+declare const ConfigUserSpaceContext: import('react').Context<ConfigUserSpaceContextType>;
+declare const Consumer: import('react').Consumer<ConfigUserSpaceContextType>;
 declare function ConfigUserSpaceProvider({ children }: {
     children: React.ReactNode;
-}): import("react").JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;
 declare function useConfigUserSpaceContext(): ConfigUserSpaceContextType;
 export { ConfigUserSpaceContext, ConfigUserSpaceProvider, Consumer as ConfigUserSpaceConsumer, useConfigUserSpaceContext, };

package/lib/{libs → packages/blocklet-ui-react/src/libs}/with-hide-when-embed.d.ts

@@ -1,4 +1,4 @@
 export default function withHideWhenEmbed<T extends object>(Component: React.ComponentType<T>): {
-    (props: T): import("react").JSX.Element | null;
+    (props: T): import("react/jsx-runtime").JSX.Element | null;
     displayName: string;
 };

package/lib/packages/blocklet-ui-react/src/types.d.ts

@@ -0,0 +1,36 @@
+import { default as PropTypes } from 'prop-types';
+export const BlockletMetaProps: PropTypes.Requireable<PropTypes.InferProps<{
+    appLogo: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    appName: PropTypes.Requireable<string>;
+    theme: PropTypes.Requireable<PropTypes.InferProps<{
+        background: PropTypes.Requireable<string>;
+    }>>;
+    enableConnect: PropTypes.Requireable<boolean>;
+    enableLocale: PropTypes.Requireable<boolean>;
+    navigation: PropTypes.Requireable<(PropTypes.InferProps<{
+        title: PropTypes.Requireable<NonNullable<string | object | null | undefined>>;
+        link: PropTypes.Requireable<NonNullable<string | object | null | undefined>>;
+        icon: PropTypes.Requireable<string>;
+        items: PropTypes.Requireable<(PropTypes.InferProps<{
+            title: PropTypes.Requireable<NonNullable<string | object | null | undefined>>;
+            link: PropTypes.Requireable<NonNullable<string | object | null | undefined>>;
+        }> | null | undefined)[]>;
+    }> | null | undefined)[]>;
+}>>;
+export const SessionManagerProps: PropTypes.Requireable<PropTypes.InferProps<{
+    showText: PropTypes.Requireable<boolean>;
+    showRole: PropTypes.Requireable<boolean>;
+    switchDid: PropTypes.Requireable<boolean>;
+    switchProfile: PropTypes.Requireable<boolean>;
+    switchPassport: PropTypes.Requireable<boolean>;
+    disableLogout: PropTypes.Requireable<boolean>;
+    onLogin: PropTypes.Requireable<(...args: any[]) => any>;
+    onLogout: PropTypes.Requireable<(...args: any[]) => any>;
+    onSwitchDid: PropTypes.Requireable<(...args: any[]) => any>;
+    onSwitchProfile: PropTypes.Requireable<(...args: any[]) => any>;
+    onSwitchPassport: PropTypes.Requireable<(...args: any[]) => any>;
+    menu: PropTypes.Requireable<any[]>;
+    menuRender: PropTypes.Requireable<(...args: any[]) => any>;
+    dark: PropTypes.Requireable<boolean>;
+    size: PropTypes.Requireable<number>;
+}>>;

package/lib/packages/blocklet-ui-react/tools/auto-exports.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/packages/blocklet-ui-react/tools/jest.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/packages/blocklet-ui-react/vite.config.d.mts

@@ -0,0 +1,2 @@
+declare const _default: import('vite').UserConfig;
+export default _default;

package/lib/types.js

@@ -1,43 +1,43 @@
-/* eslint-disable import/prefer-default-export */
-import PropTypes from 'prop-types';
-
-export const BlockletMetaProps = PropTypes.shape({
-  appLogo: PropTypes.node,
-  appName: PropTypes.string,
-  theme: PropTypes.shape({
-    background: PropTypes.string,
+import o from "prop-types";
+const n = o.shape({
+  appLogo: o.node,
+  appName: o.string,
+  theme: o.shape({
+    background: o.string
   }),
-  enableConnect: PropTypes.bool,
-  enableLocale: PropTypes.bool,
-  navigation: PropTypes.arrayOf(
-    PropTypes.shape({
-      title: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-      link: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-      icon: PropTypes.string,
-      items: PropTypes.arrayOf(
-        PropTypes.shape({
-          title: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-          link: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+  enableConnect: o.bool,
+  enableLocale: o.bool,
+  navigation: o.arrayOf(
+    o.shape({
+      title: o.oneOfType([o.string, o.object]),
+      link: o.oneOfType([o.string, o.object]),
+      icon: o.string,
+      items: o.arrayOf(
+        o.shape({
+          title: o.oneOfType([o.string, o.object]),
+          link: o.oneOfType([o.string, o.object])
         })
-      ),
+      )
     })
-  ),
-});
-
-export const SessionManagerProps = PropTypes.shape({
-  showText: PropTypes.bool,
-  showRole: PropTypes.bool,
-  switchDid: PropTypes.bool,
-  switchProfile: PropTypes.bool,
-  switchPassport: PropTypes.bool,
-  disableLogout: PropTypes.bool,
-  onLogin: PropTypes.func,
-  onLogout: PropTypes.func,
-  onSwitchDid: PropTypes.func,
-  onSwitchProfile: PropTypes.func,
-  onSwitchPassport: PropTypes.func,
-  menu: PropTypes.array,
-  menuRender: PropTypes.func,
-  dark: PropTypes.bool,
-  size: PropTypes.number,
+  )
+}), t = o.shape({
+  showText: o.bool,
+  showRole: o.bool,
+  switchDid: o.bool,
+  switchProfile: o.bool,
+  switchPassport: o.bool,
+  disableLogout: o.bool,
+  onLogin: o.func,
+  onLogout: o.func,
+  onSwitchDid: o.func,
+  onSwitchProfile: o.func,
+  onSwitchPassport: o.func,
+  menu: o.array,
+  menuRender: o.func,
+  dark: o.bool,
+  size: o.number
 });
+export {
+  n as BlockletMetaProps,
+  t as SessionManagerProps
+};

package/lib/utils.js

@@ -1,179 +1,65 @@
-import semver from 'semver';
-
-export const mapRecursive = (array, fn, childrenKey = 'children') => {
-  return array.map((item) => {
-    if (Array.isArray(item[childrenKey])) {
-      return fn({
-        ...item,
-        [childrenKey]: mapRecursive(item[childrenKey], fn, childrenKey),
-      });
-    }
-    return fn(item);
-  });
-};
-
-// 展平有层级结构的 array
-export const flatRecursive = (array, childrenKey = 'children') => {
-  const result = [];
-  mapRecursive(array, (item) => result.push(item), childrenKey);
-  return result;
-};
-
-// 对有层级结构的 array 元素计数
-export const countRecursive = (array, childrenKey = 'children') => {
-  let counter = 0;
-  mapRecursive(array, () => counter++, childrenKey);
-  return counter;
-};
-
-// 对有层级结构的 array 进行 filter 处理
-// 因为是 DFS 遍历, 可以借助 context.filteredChildren 在过滤/保留子结的同时保持父子结构 (即使父结点不满足筛选条件)
-export const filterRecursive = (array, predicate, childrenKey = 'children') => {
-  return array
-    .map((item) => ({ ...item }))
-    .filter((item) => {
-      const children = item[childrenKey];
-      if (Array.isArray(children)) {
-        const filtered = filterRecursive(children, predicate, childrenKey);
-        item[childrenKey] = filtered?.length ? filtered : undefined;
-      }
-      const context = { filteredChildren: item[childrenKey], isLeaf: !children?.length };
-      return predicate(item, context);
-    });
-};
-
-// "http://", "https://" 2 种情况
-export const isUrl = (str) => {
-  return /^https?:\/\//.test(str);
-};
-
-/**
- * @description 检测是否是 Iconify 格式的字符串
- * @deprecated
- */
-export const isIconifyString = (str) => {
-  return /^[\w-]+:[\w-]+$/.test(str);
-};
-
-/**
- * 检测 path 是否匹配当前 location, path 只考虑 "/" 开头的相对路径
- */
-export const matchPath = (path) => {
-  if (!path || !path?.startsWith('/')) {
-    return false;
-  }
-  const ensureTrailingSlash = (str) => (str.endsWith('/') ? str : `${str}/`);
-  const pathname = ensureTrailingSlash(window.location.pathname);
-  const normalizedPath = ensureTrailingSlash(new URL(path, window.location.origin).pathname);
-  return pathname.startsWith(normalizedPath);
-};
-
-/**
- * 从一组 paths 中, 找到匹配当前 location 的 path, 返回序号
- */
-export const matchPaths = (paths = []) => {
-  const matched = paths.map((item, index) => ({ path: item, index })).filter((item) => matchPath(item.path));
-  if (!matched?.length) {
-    return -1;
+import R from "semver";
+const d = (n, e, r = "children") => n.map((t) => Array.isArray(t[r]) ? e({
+  ...t,
+  [r]: d(t[r], e, r)
+}) : e(t)), S = (n, e = "children") => {
+  const r = [];
+  return d(n, (t) => r.push(t), e), r;
+}, x = (n, e = "children") => {
+  let r = 0;
+  return d(n, () => r++, e), r;
+}, V = (n, e, r = "children") => n.map((t) => ({ ...t })).filter((t) => {
+  const s = t[r];
+  if (Array.isArray(s)) {
+    const o = V(s, e, r);
+    t[r] = o != null && o.length ? o : void 0;
   }
-  // 多个 path 都匹配时, 取一个最具体 (最长的) path
-  const mostSpecific = matched.slice(1).reduce((prev, cur) => {
-    return prev.path.length >= cur.path.length ? prev : cur;
-  }, matched[0]);
-  return mostSpecific.index;
-};
-
-/** 导航列表分列 */
-export const splitNavColumns = (items, options = {}) => {
-  const { columns = 1, breakInside = false, groupHeight = 48, itemHeight = 24, childrenKey = 'items' } = options;
-
-  // 高度预估
-  const totalHeight = items.reduce((height, group) => {
-    return height + groupHeight + (group[childrenKey]?.length || 0) * itemHeight;
-  }, 0);
-  const targetHeight = Math.ceil(totalHeight / columns);
-
-  // 使用贪心策略进行分列
-  const result = [[]];
-  let currentColumn = 0;
-  let currentHeight = 0;
-
-  // 允许的高度偏差范围（有利于得到高度相差不大的列）
-  const heightVariance = targetHeight * 0.2;
-
-  // 是否应该分列
-  const shouldBreakColumn = (nextHeight) => {
-    return (
-      currentHeight > targetHeight - heightVariance &&
-      currentColumn < columns - 1 &&
-      currentHeight + nextHeight > targetHeight + heightVariance
-    );
-  };
-
-  items.forEach((group) => {
-    const groupTotalHeight = groupHeight + (group[childrenKey]?.length || 0) * itemHeight;
-
-    // 允许截断分组时，可以在任何子项处换列
-    if (breakInside && shouldBreakColumn(groupHeight)) {
-      currentColumn++;
-      currentHeight = 0;
-      result[currentColumn] = [];
-    }
-    // 不允许截断分组时，只能在分组边界换列
-    if (!breakInside && currentHeight > 0 && shouldBreakColumn(groupTotalHeight)) {
-      currentColumn++;
-      currentHeight = 0;
-      result[currentColumn] = [];
-    }
-
-    // 添加分组标题
-    result[currentColumn].push({
-      ...group,
-      group: true,
+  const c = { filteredChildren: t[r], isLeaf: !(s != null && s.length) };
+  return e(t, c);
+}), P = (n) => /^https?:\/\//.test(n), W = (n) => /^[\w-]+:[\w-]+$/.test(n), A = (n) => {
+  if (!n || !(n != null && n.startsWith("/")))
+    return !1;
+  const e = (s) => s.endsWith("/") ? s : `${s}/`, r = e(window.location.pathname), t = e(new URL(n, window.location.origin).pathname);
+  return r.startsWith(t);
+}, k = (n = []) => {
+  const e = n.map((t, s) => ({ path: t, index: s })).filter((t) => A(t.path));
+  return e != null && e.length ? e.slice(1).reduce((t, s) => t.path.length >= s.path.length ? t : s, e[0]).index : -1;
+}, v = (n, e = {}) => {
+  const { columns: r = 1, breakInside: t = !1, groupHeight: s = 48, itemHeight: c = 24, childrenKey: o = "items" } = e, w = n.reduce((u, m) => {
+    var h;
+    return u + s + (((h = m[o]) == null ? void 0 : h.length) || 0) * c;
+  }, 0), f = Math.ceil(w / r), l = [[]];
+  let i = 0, a = 0;
+  const p = f * 0.2, g = (u) => a > f - p && i < r - 1 && a + u > f + p;
+  return n.forEach((u) => {
+    var h;
+    const m = s + (((h = u[o]) == null ? void 0 : h.length) || 0) * c;
+    t && g(s) && (i++, a = 0, l[i] = []), !t && a > 0 && g(m) && (i++, a = 0, l[i] = []), l[i].push({
+      ...u,
+      group: !0
+    }), a += s, u[o] && u[o].forEach((H) => {
+      t && g(c) && (i++, a = 0, l[i] = []), l[i].push({
+        ...H,
+        group: !1
+      }), a += c;
     });
-    currentHeight += groupHeight;
-
-    // 添加子项
-    if (group[childrenKey]) {
-      group[childrenKey].forEach((child) => {
-        if (breakInside && shouldBreakColumn(itemHeight)) {
-          currentColumn++;
-          currentHeight = 0;
-          result[currentColumn] = [];
-        }
-
-        result[currentColumn].push({
-          ...child,
-          group: false,
-        });
-        currentHeight += itemHeight;
-      });
-    }
-  });
-
-  return result;
+  }), l;
+}, E = (n, e) => {
+  const r = (c) => {
+    const o = c.match(/^(\d+\.\d+\.\d+(?:-[^-]+?-\d{8}))/);
+    return o ? o[1] : c;
+  }, t = r(n), s = r(e);
+  return t === s && n !== e ? !1 : R.gte(t, s);
 };
-
-/**
- * 比较两个版本号，用于判断版本号是否兼容
- * @param {*} version1
- * @param {*} version2
- * @returns 0: 版本相同, -1: version1 < version2, 1: version1 > version2
- */
-export const compareVersions = (version1, version2) => {
-  const getDateVersion = (version) => {
-    const match = version.match(/^(\d+\.\d+\.\d+(?:-[^-]+?-\d{8}))/);
-    return match ? match[1] : version;
-  };
-
-  const dateVersion1 = getDateVersion(version1);
-  const dateVersion2 = getDateVersion(version2);
-
-  // 如果基础版本相同，但完整版本不同（意味着有额外部分），返回false
-  if (dateVersion1 === dateVersion2 && version1 !== version2) {
-    return false;
-  }
-
-  // 其他情况正常比较
-  return semver.gte(dateVersion1, dateVersion2);
+export {
+  E as compareVersions,
+  x as countRecursive,
+  V as filterRecursive,
+  S as flatRecursive,
+  W as isIconifyString,
+  P as isUrl,
+  d as mapRecursive,
+  A as matchPath,
+  k as matchPaths,
+  v as splitNavColumns
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/ui-react",
-  "version": "2.13.70",
+  "version": "3.0.0",
   "description": "Some useful front-end web components that can be used in Blocklets.",
   "keywords": [
     "react",
@@ -20,8 +20,8 @@
   "scripts": {
     "lint": "eslint src tests --ext js --ext jsx --ext tsx --ext ts",
     "lint:fix": "npm run lint -- --fix",
-    "build": "unbuild",
-    "watch": "CONSOLA_LEVEL=1 nodemon -e .jsx,.js,.ts,.tsx -w src -x 'yalc publish --push'",
+    "build": "vite build",
+    "watch": "vite build --watch",
     "precommit": "CI=1 npm run lint",
     "prepush": "CI=1 npm run lint",
     "prepublish": "npm run build",
@@ -34,65 +34,60 @@
   "dependencies": {
     "@abtnode/constant": "^1.16.44",
     "@abtnode/util": "^1.16.44",
-    "@arcblock/bridge": "^2.13.70",
-    "@arcblock/react-hooks": "^2.13.70",
+    "@arcblock/bridge": "3.0.0",
+    "@arcblock/icons": "3.0.0",
+    "@arcblock/react-hooks": "3.0.0",
     "@arcblock/ws": "^1.20.14",
     "@blocklet/constant": "^1.16.44",
-    "@blocklet/did-space-react": "^1.0.60",
+    "@blocklet/did-space-react": "^1.0.62",
     "@iconify-icons/logos": "^1.2.36",
     "@iconify-icons/material-symbols": "^1.2.58",
     "@iconify-icons/tabler": "^1.2.95",
-    "@iconify/react": "^5.2.0",
-    "ahooks": "^3.7.10",
-    "axios": "^1.7.5",
-    "clsx": "^2.1.0",
-    "core-js": "^3.25.5",
-    "dayjs": "^1.11.5",
-    "dompurify": "^3.2.1",
+    "@iconify/react": "^5.2.1",
+    "ahooks": "^3.8.5",
+    "axios": "^1.10.0",
+    "clsx": "^2.1.1",
+    "dayjs": "^1.11.13",
+    "dompurify": "^3.2.6",
     "iconify-icon": "^1.0.8",
     "iconify-icons-material-symbols-400": "^0.0.1",
     "is-url": "^1.2.4",
     "js-cookie": "^2.2.1",
     "lodash": "^4.17.21",
-    "moment-timezone": "^0.5.37",
-    "notistack": "^2.0.5",
+    "moment-timezone": "^0.5.48",
+    "notistack": "^2.0.8",
     "p-all": "^5.0.0",
     "p-queue": "^6.6.2",
     "p-wait-for": "^5.0.2",
     "prop-types": "^15.8.1",
     "react-error-boundary": "^3.1.4",
     "react-placeholder": "^4.1.0",
-    "semver": "^7.6.3",
-    "type-fest": "^4.22.0",
-    "ua-parser-js": "^1.0.37",
-    "ufo": "^1.5.3",
-    "validator": "^13.9.0"
+    "semver": "^7.7.2",
+    "type-fest": "^4.41.0",
+    "ua-parser-js": "^1.0.40",
+    "ufo": "^1.6.1",
+    "validator": "^13.15.15"
   },
   "peerDependencies": {
-    "@arcblock/did-connect": "^2.11.48",
-    "@arcblock/ux": "^2.11.48",
+    "@arcblock/did-connect": "workspace:*",
+    "@arcblock/ux": "workspace:*",
     "@blocklet/js-sdk": "^1.16.41",
-    "@emotion/react": "^11.10.4",
-    "@emotion/styled": "^11.10.4",
-    "@mui/icons-material": "^5.15.0",
-    "@mui/material": "^5.15.0",
-    "react": "^18.2.0",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@mui/icons-material": "^7.1.2",
+    "@mui/material": "^7.1.2",
+    "react": "^19.0.0",
     "react-router-dom": "^6.22.3"
   },
   "publishConfig": {
     "access": "public"
   },
   "devDependencies": {
-    "@babel/cli": "^7.19.3",
-    "@babel/core": "^7.19.3",
-    "@babel/preset-env": "^7.19.3",
-    "@babel/preset-react": "^7.18.6",
     "@types/dompurify": "^3.2.0",
     "@types/ua-parser-js": "^0.7.39",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "glob": "^10.3.3",
+    "eslint-plugin-react-hooks": "^4.6.2",
     "jest": "^29.7.0",
     "unbuild": "^2.0.0"
   },
-  "gitHead": "b38a83a2c7d9a22e90bab369d8f61340db2abbd0"
+  "gitHead": "b001c32ca85d40d8a0784ca581bfd54d90550b24"
 }

package/src/ComponentInstaller/ComponentInstaller.stories.jsx

@@ -0,0 +1,16 @@
+import Basic from './demo/basic';
+
+export default {
+  title: 'Blocklet-UI-React/ComponentInstaller',
+
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+Basic.argTypes = {
+  userRole: { control: 'select', options: [null, 'owner', 'developer'] },
+};
+Basic.storyName = 'ComponentInstaller';
+
+export { Basic };

package/src/ComponentInstaller/index.jsx

@@ -3,26 +3,26 @@ import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { translate } from '@arcblock/ux/lib/Locale/util';
 import SessionPermission from '@arcblock/ux/lib/SessionPermission';
 import { Icon } from '@iconify/react';
-import CloseIcon from '@mui/icons-material/Close';
+import { Close as CloseIcon } from '@mui/icons-material';
 import { Box, ClickAwayListener, Fade, IconButton, Paper } from '@mui/material';
 import { useMemoizedFn } from 'ahooks';
 import PropTypes from 'prop-types';
-import { useContext } from 'react';
+import { use } from 'react';
 import InstallerItem from './installer-item';
 import translations from './locales';
 import useComponentInstalled from './use-component-installed';
 
 function ComponentInstaller({
-  warnIcon,
+  warnIcon = null,
   did,
-  noPermissionMute,
-  onInstalled,
-  onError,
+  noPermissionMute = false,
+  onInstalled = null,
+  onError = null,
   children,
-  closeByOutSize,
-  onClose,
-  fallback,
-  disabled,
+  closeByOutSize = false,
+  onClose = null,
+  fallback = null,
+  disabled = false,
   roles = ['owner', 'admin'],
 }) {
   const { locale } = useLocaleContext();
@@ -34,7 +34,7 @@ function ComponentInstaller({
     onInstalled,
     onError,
   });
-  const sessionCtx = useContext(SessionContext);
+  const sessionCtx = use(SessionContext);
 
   const handleClose = () => {
     onClose?.(false);
@@ -193,18 +193,6 @@ ComponentInstaller.propTypes = {
   roles: PropTypes.array,
 };
 
-ComponentInstaller.defaultProps = {
-  disabled: false,
-  warnIcon: null,
-  noPermissionMute: false,
-  onInstalled: null,
-  onError: null,
-  closeByOutSize: false,
-  onClose: null,
-  fallback: null,
-  roles: ['owner', 'admin'],
-};
-
 export default function WrapComponentInstaller(props) {
   if (window.blocklet) {
     return <ComponentInstaller {...props} />;
@@ -217,7 +205,3 @@ WrapComponentInstaller.propTypes = {
   ...ComponentInstaller.propTypes,
   children: PropTypes.any.isRequired,
 };
-
-WrapComponentInstaller.defaultProps = {
-  ...ComponentInstaller.defaultProps,
-};

package/src/ComponentInstaller/installer-item.jsx

@@ -2,7 +2,7 @@ import { Icon } from '@iconify/react';
 import { Box, Button, useTheme } from '@mui/material';
 import PropTypes from 'prop-types';
 
-export default function InstallerItem({ optionalComponent, index, installStatus, hasPermission, t }) {
+export default function InstallerItem({ optionalComponent, index, installStatus = '', hasPermission, t }) {
   const { palette } = useTheme();
   const handleInstall = () => {
     // 这里是安全的
@@ -127,7 +127,3 @@ InstallerItem.propTypes = {
   installStatus: PropTypes.string,
   hasPermission: PropTypes.bool.isRequired,
 };
-
-InstallerItem.defaultProps = {
-  installStatus: '',
-};

package/src/ComponentManager/components/add-component.tsx

@@ -1,4 +1,4 @@
-import { useEffect, ReactElement, useRef, useContext } from 'react';
+import { useEffect, ReactElement, useRef, use } from 'react';
 import Button from '@arcblock/ux/lib/Button';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { BLOCKLET_SERVICE_PATH_PREFIX } from '@arcblock/ux/lib/Util/constant';
@@ -33,9 +33,9 @@ export default function AddComponent({
   grantedRoles?: string[];
   onComplete: () => void;
   onClose: () => void;
-  render?: ({ onClick, loading }: { onClick: () => void; loading: boolean }) => ReactElement;
+  render?: ({ onClick, loading }: { onClick: () => void; loading: boolean }) => ReactElement<any>;
 }) {
-  const { session } = useContext<TSessionContext>(SessionContext);
+  const { session } = use<TSessionContext>(SessionContext);
   const { locale } = useLocaleContext();
   const t = useMemoizedFn((key, data = {}) => {
     return translate(translations, key, locale, 'en', data);

package/src/ComponentManager/components/publish-component.tsx

@@ -1,4 +1,4 @@
-import { ReactElement, useContext } from 'react';
+import { ReactElement, use } from 'react';
 import Button from '@arcblock/ux/lib/Button';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { BLOCKLET_SERVICE_PATH_PREFIX } from '@arcblock/ux/lib/Util/constant';
@@ -20,9 +20,9 @@ export default function PublishComponent({
   componentDid: string;
   grantedRoles?: string[];
   onClose: () => void;
-  render?: ({ onClick, loading }: { onClick: () => void; loading: boolean }) => ReactElement;
+  render?: ({ onClick, loading }: { onClick: () => void; loading: boolean }) => ReactElement<any>;
 }) {
-  const { session } = useContext<TSessionContext>(SessionContext);
+  const { session } = use<TSessionContext>(SessionContext);
   const { locale } = useLocaleContext();
   const t = useMemoizedFn((key, data = {}) => {
     return translate(translations, key, locale, 'en', data);