@arcblock/ux 2.13.6 → 2.13.8

package/lib/Colors/index.d.ts

@@ -1,3 +1,5 @@
-export { default } from './themes/default';
+import type { Theme } from '@mui/material';
+declare const colors: Theme["palette"];
+export default colors;
 export { default as temp } from './themes/temp';
 export { default as didConnectColors } from './themes/did-connect';

package/lib/Colors/index.js

@@ -1,4 +1,6 @@
-// eslint-disable-next-line no-restricted-exports
-export { default } from './themes/default';
+import { BLOCKLET_THEME_LIGHT } from '@blocklet/theme';
+// @compatibility
+const colors = BLOCKLET_THEME_LIGHT.palette;
+export default colors;
 export { default as temp } from './themes/temp';
 export { default as didConnectColors } from './themes/did-connect';

package/lib/Config/config-provider.d.ts

@@ -1,18 +1,18 @@
 import { ReactNode } from 'react';
+import { type PaletteMode } from '@mui/material';
 import type { ThemeOptions } from '@mui/material/styles';
 import { LocaleProviderProps } from '../Locale/context';
 import { ThemeProviderProps } from '../Theme/theme-provider';
-import { ThemeMode } from '../type';
 export interface ConfigContextType {
-    mode: ThemeMode;
+    mode: PaletteMode;
     themeOptions: ThemeOptions;
     toggleMode: () => void;
 }
-export declare function isThemeRecord(theme: ThemeOptions | Record<ThemeMode, ThemeOptions>): theme is Record<ThemeMode, ThemeOptions>;
+export declare function isThemeRecord(theme: ThemeOptions | Record<PaletteMode, ThemeOptions>): theme is Record<PaletteMode, ThemeOptions>;
 export interface ConfigProviderProps extends Omit<LocaleProviderProps, 'translations'>, Omit<ThemeProviderProps, 'theme'> {
     children: ReactNode;
-    prefer?: ThemeMode;
-    theme?: ThemeOptions | Record<ThemeMode, ThemeOptions>;
+    prefer?: PaletteMode;
+    theme?: ThemeOptions | Record<PaletteMode, ThemeOptions>;
     disableBlockletTheme?: boolean;
     translations?: Record<string, any>;
 }
@@ -24,7 +24,7 @@ export declare namespace ConfigProvider {
     var useConfig: typeof import("./config-provider").useConfig;
 }
 export declare function useConfig(): {
-    mode: ThemeMode;
+    mode: PaletteMode;
     themeOptions: ThemeOptions;
     toggleMode: () => void;
     locale: import("../type").Locale;
@@ -34,5 +34,5 @@ export declare function useConfig(): {
         code: string;
         name: string;
     }[];
-    theme: import("@mui/material/styles").Theme;
+    theme: import("@mui/material").Theme;
 };

package/lib/Config/config-provider.js

@@ -35,7 +35,7 @@ export function ConfigProvider({
     }
 
     // 未启用暗色主题
-    if (!window.blocklet?.USE_DARK_THEME) {
+    if (['1', 'true'].includes(window.blocklet?.USE_DARK_THEME) === false) {
       return 'light';
     }
 

package/lib/Theme/theme.d.ts

@@ -1,54 +1,20 @@
-import { Components, type ThemeOptions } from '@mui/material/styles';
+import type { PaletteMode } from '@mui/material';
+import { type ThemeOptions } from '@mui/material/styles';
 import { deepmerge } from '@mui/utils';
-import type { Typography } from '@mui/material/styles/createTypography';
-import { ThemeMode } from '../type';
 import '@fontsource/roboto/latin-400.css';
 import '@fontsource/roboto/latin-500.css';
 import '@fontsource/roboto/latin-700.css';
 import '@fontsource/roboto/latin-ext-400.css';
 import '@fontsource/roboto/latin-ext-500.css';
 import '@fontsource/roboto/latin-ext-700.css';
-declare module '@mui/material/styles' {
-    interface Theme {
-        mode?: ThemeMode;
-        themeName?: string;
-        pageWidth?: string;
-        colors?: Record<string, string>;
-        typography: Typography & {
-            useNextVariants: boolean;
-            color: Record<string, string>;
-            button: {
-                fontWeight?: number;
-            };
-        };
-    }
-    interface ThemeOptions {
-        themeName?: string;
-        mode?: ThemeMode;
-        pageWidth?: string;
-        colors?: Record<string, string>;
-        /** @deprecated 请使用 components */
-        overrides?: Components<Omit<Theme, 'components'>>;
-    }
-    interface TypeText {
-        hint: string;
-    }
-}
-declare module '@mui/material/styles/createTypography' {
-    interface TypographyOptions {
-        useNextVariants?: boolean;
-        color?: Record<string, string>;
-    }
-}
 export declare function collectFontFamilies(obj?: {
     fontFamily?: string;
 }, fontSet?: Set<string>): Set<string>;
 export declare function loadFonts(fonts: string[]): Promise<boolean>;
-export declare function createDefaultThemeOptions(mode?: ThemeMode): ThemeOptions;
-export declare const create: ({ disableBlockletTheme, mode, pageWidth, overrides, palette, components, ...rest }?: ThemeOptions & {
+export declare function createDefaultThemeOptions(mode?: PaletteMode): ThemeOptions;
+export interface UserThemeOptions extends ThemeOptions {
     disableBlockletTheme?: boolean;
-}) => import("@mui/material/styles").Theme;
-export declare const createTheme: ({ disableBlockletTheme, mode, pageWidth, overrides, palette, components, ...rest }?: ThemeOptions & {
-    disableBlockletTheme?: boolean;
-}) => import("@mui/material/styles").Theme;
+}
+export declare const create: (...args: UserThemeOptions[]) => import("@mui/material").Theme;
+export declare const createTheme: (...args: UserThemeOptions[]) => import("@mui/material").Theme;
 export { deepmerge };

package/lib/Theme/theme.js

@@ -1,9 +1,10 @@
 /* eslint-disable no-shadow */
 // https://app.zeplin.io/styleguide/5d1436f1e97c2156f49c0725/colors
+
 import { createTheme as _createTheme, responsiveFontSizes } from '@mui/material/styles';
 import { deepmerge } from '@mui/utils';
 import webfontloader from 'webfontloader';
-import colors from '../Colors';
+import { BLOCKLET_THEME_LIGHT, BLOCKLET_THEME_DARK, DEFAULT_FONTS } from '@blocklet/theme';
 import { cleanedObj } from '../Util';
 
 // 默认只加载最基本的 roboto latin 字体
@@ -14,17 +15,6 @@ import '@fontsource/roboto/latin-ext-400.css';
 import '@fontsource/roboto/latin-ext-500.css';
 import '@fontsource/roboto/latin-ext-700.css';
 
-// 扩展 Theme
-
-// 扩展 TypographyOptions
-
-// 默认深色主题
-const defaultDarkTheme = _createTheme({
-  palette: {
-    mode: 'dark'
-  }
-});
-
 // 收集字体配置
 export function collectFontFamilies(obj, fontSet = new Set()) {
   if (!obj || typeof obj !== 'object') return fontSet;
@@ -40,8 +30,7 @@ export function collectFontFamilies(obj, fontSet = new Set()) {
 }
 
 // 动态加载字体
-const defaultFonts = ['Roboto', 'Helvetica', 'Arial', 'sans-serif']; // 后三者是系统字体，无需动态加载
-const prevFonts = new Set(defaultFonts.concat('inherit')); // inherit 属于 MUI 特殊值，无需动态加载
+const prevFonts = new Set(DEFAULT_FONTS.concat('inherit')); // inherit 属于 MUI 特殊值，无需动态加载
 export function loadFonts(fonts) {
   // 过滤出未加载的字体
   const unloadedFonts = fonts.filter(font => !prevFonts.has(font));
@@ -74,103 +63,21 @@ export function loadFonts(fonts) {
 
 // 创建默认主题配置
 export function createDefaultThemeOptions(mode = 'light') {
-  const result = {
-    palette: {
-      mode,
-      ...colors,
-      background: {
-        paper: colors.common.white,
-        default: colors.background.default
-      }
-    },
-    typography: {
-      fontFamily: defaultFonts.join(','),
-      useNextVariants: true,
-      color: {
-        // 此处 #222222 必须硬编码, layout/sidebar.js -> Icon/image 加载图片时 color 会影响加载路径
-        // TODO: 此处硬编码的色值后面需要改为 colors.grey[900],
-        //       或者如果可以的话直接删掉 typography#color, 文本颜色建议使用 theme.palette.text 中的色值?
-        //       layout 组件建议重构, sidebar 中建议使用 icon 替换 img (#366)
-        main: mode === 'light' ? '#222222' : colors.common.white,
-        gray: mode === 'light' ? colors.grey[500] : colors.grey[300]
-      },
-      // button 默认使用粗体
-      button: {
-        fontWeight: 700
-      }
-    },
-    components: {
-      MuiButton: {
-        styleOverrides: {
-          root: {
-            boxShadow: 'none'
-          }
-        }
-      },
-      MuiButtonGroup: {
-        styleOverrides: {
-          root: {
-            boxShadow: 'none'
-          }
-        }
-      },
-      MuiTableCell: {
-        styleOverrides: {
-          root: ({
-            ownerState
-          }) => ({
-            ...(ownerState.size === 'small' ? {
-              borderBottomWidth: '0',
-              paddingTop: '8px',
-              paddingBottom: '8px',
-              paddingLeft: 0,
-              paddingRight: '20px'
-            } : {
-              borderBottomWidth: '0',
-              paddingTop: '14px',
-              paddingBottom: '14px',
-              paddingLeft: 0,
-              paddingRight: '30px'
-            })
-          }),
-          head: {
-            textTransform: 'uppercase',
-            color: mode === 'light' ? colors.grey[900] : colors.grey[300]
-          },
-          body: {
-            color: mode === 'light' ? colors.grey[900] : colors.grey[300]
-          }
-        }
-      }
-    }
-  };
-
-  // 深色主题
   if (mode === 'dark') {
-    result.palette = {
-      ...defaultDarkTheme.palette,
-      background: {
-        paper: colors.grey[900],
-        default: colors.grey[900]
-      }
-    };
+    return BLOCKLET_THEME_DARK;
   }
-  return result;
+  return BLOCKLET_THEME_LIGHT;
 }
-
-// https://material-ui.com/customization/default-theme/
-export const create = ({
-  disableBlockletTheme = false,
+// 主要处理 mode 和 overrides
+const normalizeUserThemeOptions = ({
   mode = 'light',
-  pageWidth = 'md',
-  overrides,
-  // original theme options
   palette,
   components,
+  overrides,
   ...rest
-} = {}) => {
-  const userThemeOptions = {
-    themeName: 'ArcBlock',
+}) => {
+  return {
+    mode,
     palette: {
       ...palette,
       mode
@@ -179,43 +86,54 @@ export const create = ({
       ...overrides,
       ...components
     },
-    // @TODO 考虑使用 theme.shape.pageWidth
-    pageWidth,
-    // @TODO 考虑使用 theme.palette.common
-    colors: {
-      white: '#FFFFFF',
-      dark: '#4A707C',
-      gray: '#222222',
-      minor: '#9B9B9B',
-      darkText: '#DCDCDC',
-      background: '#F7F8F8',
-      yellow: '#FFCF71',
-      green: '#44cdc6',
-      red: '#D0021B',
-      blue: '#4E6AF6',
-      primary: '#222222',
-      black: '#222222',
-      secondary: '#44cdc6',
-      mint: '#44cdc6',
-      textSecondary: '#4A4A4A',
-      active: '#5b9025',
-      danger: '#D0021B',
-      lightGrey: '#BCBCBC'
-    },
-    // @deprecated use theme.palette.mode
-    mode,
     ...rest
   };
-  // Blocklet Server 后台配置的全局主题
+};
+const defaultUserThemeOptions = {
+  themeName: 'ArcBlock',
+  pageWidth: 'md',
+  disableBlockletTheme: false,
+  // @deprecated use theme.palette
+  colors: {
+    white: '#FFFFFF',
+    dark: '#4A707C',
+    gray: '#222222',
+    minor: '#9B9B9B',
+    darkText: '#DCDCDC',
+    background: '#F7F8F8',
+    yellow: '#FFCF71',
+    green: '#44cdc6',
+    red: '#D0021B',
+    blue: '#4E6AF6',
+    primary: '#222222',
+    black: '#222222',
+    secondary: '#44cdc6',
+    mint: '#44cdc6',
+    textSecondary: '#4A4A4A',
+    active: '#5b9025',
+    danger: '#D0021B',
+    lightGrey: '#BCBCBC'
+  }
+};
+
+// https://material-ui.com/customization/default-theme/
+export const create = (...args) => {
+  const userThemeOptions = args.reduce((acc, curr) => deepmerge(acc, normalizeUserThemeOptions(curr)), normalizeUserThemeOptions(defaultUserThemeOptions));
+  const {
+    mode,
+    disableBlockletTheme
+  } = userThemeOptions;
   const blockletThemeOptions = window.blocklet?.theme?.[mode] ?? {};
-  // UX Theme 默认配置
   const defaultThemeOptions = createDefaultThemeOptions(mode);
+
   // 合并配置
   let mergedThemeOptions = defaultThemeOptions;
   if (!disableBlockletTheme) {
     mergedThemeOptions = deepmerge(defaultThemeOptions, cleanedObj(blockletThemeOptions));
   }
   mergedThemeOptions = deepmerge(mergedThemeOptions, cleanedObj(userThemeOptions));
+
+  // 创建主题
   const theme = _createTheme(mergedThemeOptions);
 
   // 异步加载字体
@@ -223,7 +141,7 @@ export const create = ({
   loadFonts(Array.from(fonts));
 
   /**
-   * 响应式字体，配置后，theme.typography 会变为下面的结构
+   * 支持响应式字体，theme.typography.$variant 中会添加 @media 分支，比如
    * {
    *  "h1": {
    *    "fontSize": "3rem",

package/lib/UserCard/Cards/avatar-only.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
-import { UserCardProps } from '../types';
-interface AvatarOnlyCardProps extends UserCardProps {
+import { UserCardProps, User } from '../types';
+interface AvatarOnlyCardProps extends Omit<UserCardProps, 'user'> {
+    user: User;
     renderCardContent: () => React.ReactNode;
     shouldShowHoverCard: boolean;
 }

package/lib/UserCard/Cards/basic-info.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
-import { UserCardProps } from '../types';
-interface BasicCardProps extends UserCardProps {
+import { UserCardProps, User } from '../types';
+interface BasicCardProps extends Omit<UserCardProps, 'user'> {
+    user: User;
     shouldShowHoverCard: boolean;
     renderCardContent?: () => React.ReactNode | null;
     isFull?: boolean;

package/lib/UserCard/Cards/basic-info.js

@@ -12,6 +12,8 @@ function BasicCard(props) {
     renderCustomContent,
     isFull = true,
     infoType = InfoType.Minimal,
+    renderFields,
+    popupRenderFields,
     ...rest
   } = props;
   return /*#__PURE__*/_jsxs(Box, {
@@ -28,12 +30,16 @@ function BasicCard(props) {
       ...rest
     }), infoType === InfoType.Basic && /*#__PURE__*/_jsx(BasicContent, {
       user: user,
-      isFull: isFull
-    }), renderCustomContent && /*#__PURE__*/_jsx(Box, {
-      sx: {
-        mt: 1.5
-      },
-      children: renderCustomContent()
+      isFull: isFull,
+      renderFields: renderFields
+    }), /*#__PURE__*/_jsx(Box, {
+      className: "user-card__footer",
+      children: renderCustomContent && /*#__PURE__*/_jsx(Box, {
+        sx: {
+          mt: 1.5
+        },
+        children: renderCustomContent()
+      })
     })]
   });
 }

package/lib/UserCard/Cards/index.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
-import { UserCardProps } from '../types';
-interface DetailedCardProps extends UserCardProps {
+import { UserCardProps, User } from '../types';
+interface DetailedCardProps extends Omit<UserCardProps, 'user'> {
+    user: User;
     shouldShowHoverCard: boolean;
     renderCardContent?: () => React.ReactNode | null;
 }

package/lib/UserCard/Cards/name-only.d.ts

@@ -1,3 +1,5 @@
-import { UserCardProps } from '../types';
-declare function NameOnlyCard(props: UserCardProps): import("react/jsx-runtime").JSX.Element;
+import { UserCardProps, User } from '../types';
+declare function NameOnlyCard(props: Omit<UserCardProps, 'user'> & {
+    user: User;
+}): import("react/jsx-runtime").JSX.Element;
 export default NameOnlyCard;

package/lib/UserCard/Cards/name-only.js

@@ -6,10 +6,11 @@ import { renderAvatar } from '../components';
 function NameOnlyCard(props) {
   const {
     user,
-    avatarSize = 48
+    avatarSize = 48,
+    onAvatarClick
   } = props;
   return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [renderAvatar(user, avatarSize, props.avatarProps), /*#__PURE__*/_jsx(Typography, {
+    children: [renderAvatar(user, avatarSize, props.avatarProps, onAvatarClick), /*#__PURE__*/_jsx(Typography, {
       variant: "body1",
       children: user.fullName || user.email || user.did
     })]

package/lib/UserCard/Container/dialog.js

@@ -18,7 +18,7 @@ function DialogContainer({
       border: '1px solid',
       borderColor: 'divider',
       borderRadius: 2,
-      maxWidth: 400,
+      maxWidth: 500,
       minWidth: 320,
       display: 'flex'
     }, sx ? sx : null),

package/lib/UserCard/Content/basic.d.ts

@@ -2,6 +2,7 @@ import { User } from '../types';
 interface BasicContentProps {
     user: User;
     isFull?: boolean;
+    renderFields?: string[];
 }
-declare function BasicContent({ user, isFull }: BasicContentProps): import("react/jsx-runtime").JSX.Element;
+declare function BasicContent({ user, isFull, renderFields }: BasicContentProps): import("react/jsx-runtime").JSX.Element | null;
 export default BasicContent;