@arcblock/ux 2.13.70 → 3.0.0

package/lib/Theme/theme.js

@@ -1,185 +1,137 @@
-/* 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 { BLOCKLET_THEME_LIGHT, BLOCKLET_THEME_DARK, DEFAULT_FONTS, getDefaultThemePrefer, getBlockletThemeOptions } from '@blocklet/theme';
-import { cleanedObj, deepmergeAll } from '../Util';
-
-// 默认只加载最基本的 roboto latin 字体
-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';
-
-/** 是否是 MUI Theme 对象 */
-export function isTheme(obj) {
-  return obj && typeof obj === 'object' && obj.palette && typeof obj.palette.getContrastText === 'function';
+import { createTheme as f, responsiveFontSizes as _ } from "@mui/material";
+import { deepmerge as d } from "@mui/utils";
+import { deepmerge as X } from "@mui/utils";
+import b from "webfontloader";
+import { DEFAULT_FONTS as C, getDefaultThemePrefer as k, getBlockletThemeOptions as h, BLOCKLET_THEME_DARK as x, BLOCKLET_THEME_LIGHT as A } from "@blocklet/theme";
+import { deepmergeAll as E, cleanedObj as m } from "../Util/index.js";
+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";
+function D(e) {
+  return e && typeof e == "object" && e.palette && typeof e.palette.getContrastText == "function";
 }
-
-/** 是否是 UX Theme 对象 */
-export function isUxTheme(obj) {
-  return isTheme(obj) && obj.__isUxTheme__ === true;
+function q(e) {
+  return D(e) && e.__isUxTheme__ === !0;
 }
-
-// 收集字体配置
-export function collectFontFamilies(obj, fontSet = new Set()) {
-  if (!obj || typeof obj !== 'object') return fontSet;
-  if (typeof obj.fontFamily === 'string') {
-    obj.fontFamily.replace(/"/g, '').split(',').map(font => font.trim()).filter(Boolean).forEach(font => fontSet.add(font));
-  }
-  Object.values(obj).forEach(value => {
-    if (typeof value === 'object') {
-      collectFontFamilies(value, fontSet);
-    }
-  });
-  return fontSet;
+function u(e, t = /* @__PURE__ */ new Set()) {
+  return !e || typeof e != "object" || (typeof e.fontFamily == "string" && e.fontFamily.replace(/"/g, "").split(",").map((o) => o.trim()).filter(Boolean).forEach((o) => t.add(o)), Object.values(e).forEach((o) => {
+    typeof o == "object" && u(o, t);
+  })), t;
 }
-
-// 动态加载字体
-const prevFonts = new Set(DEFAULT_FONTS.concat('inherit')); // inherit 属于 MUI 特殊值，无需动态加载
-export function loadFonts(fonts) {
-  // 过滤出未加载的字体
-  const unloadedFonts = fonts.filter(font => !prevFonts.has(font));
-
-  // 如果所有字体都已加载，直接返回
-  if (unloadedFonts.length === 0) {
-    return Promise.resolve(true);
-  }
-
-  // record
-  unloadedFonts.forEach(font => prevFonts.add(font));
-
-  // support font-display: swap
-  const lastFontIndex = unloadedFonts.length - 1;
-  unloadedFonts[lastFontIndex] = `${unloadedFonts[lastFontIndex]}&display=swap`;
-  return new Promise(resolve => {
-    webfontloader.load({
+const s = new Set(C.concat("inherit"));
+function w(e) {
+  const t = e.filter((r) => !s.has(r));
+  if (t.length === 0)
+    return Promise.resolve(!0);
+  t.forEach((r) => s.add(r));
+  const o = t.length - 1;
+  return t[o] = `${t[o]}&display=swap`, new Promise((r) => {
+    b.load({
       google: {
-        families: unloadedFonts
+        families: t
       },
-      active: () => resolve(true),
-      inactive: () => resolve(true),
-      fontinactive: (familyName, fvd) => {
-        prevFonts.delete(familyName);
-        console.warn(`font ${familyName} ${fvd} download failed`);
+      active: () => r(!0),
+      inactive: () => r(!0),
+      fontinactive: (n, i) => {
+        s.delete(n), console.warn(`font ${n} ${i} download failed`);
       }
     });
   });
 }
-
-// 创建默认主题配置
-export function createDefaultThemeOptions(mode = 'light') {
-  if (mode === 'dark') {
-    return BLOCKLET_THEME_DARK;
-  }
-  return BLOCKLET_THEME_LIGHT;
+function T(e = "light") {
+  return e === "dark" ? x : A;
 }
-export function lazyCreateDefaultTheme(mode) {
-  let theme = null;
+function v(e) {
+  let t = null;
   return () => {
-    if (theme) return theme;
-    const options = deepmerge(createDefaultThemeOptions(mode), getBlockletThemeOptions(mode));
-    theme = _createTheme(options);
-    return theme;
+    if (t) return t;
+    const o = d(T(e), h(e));
+    return t = f(o), t;
   };
 }
-
-// 主要处理 overrides
-const normalizeUserThemeOptions = ({
-  palette,
-  components,
-  overrides,
-  ...rest
-}) => {
-  const result = {
-    palette,
-    components: {
-      ...overrides,
-      ...components
-    },
-    ...rest
-  };
-  return result;
-};
-const defaultUxThemeOptions = {
-  themeName: 'ArcBlock',
-  pageWidth: 'md',
-  disableBlockletTheme: false,
+const p = ({ palette: e, components: t, overrides: o, ...r }) => ({
+  palette: e,
+  components: {
+    ...o,
+    ...t
+  },
+  ...r
+}), L = {
+  themeName: "ArcBlock",
+  pageWidth: "md",
+  disableBlockletTheme: !1,
   // @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'
+    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 defaultPrefer = getDefaultThemePrefer();
-  const createBaseTheme = lazyCreateDefaultTheme(defaultPrefer);
-  const userThemeOptions = args.reduce((acc, curr) => deepmerge(acc, normalizeUserThemeOptions(typeof curr === 'function' ? curr(createBaseTheme()) : curr)), normalizeUserThemeOptions(defaultUxThemeOptions));
-  const prefer = userThemeOptions.mode || userThemeOptions.palette?.mode || defaultPrefer;
-  const blockletThemeOptions = getBlockletThemeOptions(prefer);
-  const defaultThemeOptions = createDefaultThemeOptions(prefer);
-  const {
-    disableBlockletTheme
-  } = userThemeOptions;
-
-  // 合并配置
-  const mergedThemeOptions = deepmergeAll([defaultThemeOptions, !disableBlockletTheme && cleanedObj(blockletThemeOptions), cleanedObj(userThemeOptions),
-  // 确保 mode 跟 prefer 一致
-  {
-    mode: prefer,
-    palette: {
-      mode: prefer
-    }
-  }].filter(Boolean));
-
-  // 创建主题
-  const theme = _createTheme(mergedThemeOptions);
-  theme.__isUxTheme__ = true;
-
-  // 异步加载字体
-  const fonts = collectFontFamilies(theme.typography);
-  loadFonts(Array.from(fonts));
-
-  /**
-   * 支持响应式字体，theme.typography.$variant 中会添加 @media 分支，比如
-   * {
-   *  "h1": {
-   *    "fontSize": "3rem",
-   *    "@media (min-width:600px)": {
-   *      "fontSize": "3.3125rem"
-   *    }
-   *  }
-   * }
-   */
-  const enhanced = responsiveFontSizes(theme, {
-    breakpoints: ['xs', 'sm', 'md', 'lg'],
-    disableAlign: false,
+}, U = (...e) => {
+  var l;
+  const t = k(), o = v(t), r = e.reduce(
+    (O, c) => d(O, p(typeof c == "function" ? c(o()) : c)),
+    p(L)
+  ), n = r.mode || ((l = r.palette) == null ? void 0 : l.mode) || t, i = h(n), F = T(n), { disableBlockletTheme: g } = r, y = E(
+    [
+      F,
+      !g && m(i),
+      m(r),
+      // 确保 mode 跟 prefer 一致
+      {
+        mode: n,
+        palette: { mode: n }
+      }
+    ].filter(Boolean)
+  ), a = f(y);
+  a.__isUxTheme__ = !0;
+  const B = u(a.typography);
+  return w(Array.from(B)), _(a, {
+    breakpoints: ["xs", "sm", "md", "lg"],
+    disableAlign: !1,
     factor: 3,
-    variants: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'subtitle1', 'subtitle2', 'body1', 'body2', 'caption', 'button', 'overline']
+    variants: [
+      "h1",
+      "h2",
+      "h3",
+      "h4",
+      "h5",
+      "h6",
+      "subtitle1",
+      "subtitle2",
+      "body1",
+      "body2",
+      "caption",
+      "button",
+      "overline"
+    ]
   });
-  return enhanced;
+}, J = U;
+export {
+  u as collectFontFamilies,
+  U as create,
+  T as createDefaultThemeOptions,
+  J as createTheme,
+  X as deepmerge,
+  D as isTheme,
+  q as isUxTheme,
+  v as lazyCreateDefaultTheme,
+  w as loadFonts
 };
-export const createTheme = create;
-export { deepmerge };

package/lib/Toast/Toast.stories.d.ts

@@ -0,0 +1,15 @@
+export { default as Basic } from './demo/basic';
+export { default as CustomOptions } from './demo/custom-options';
+export { default as ManualClose } from './demo/manual-close';
+declare namespace _default {
+    let title: string;
+    namespace parameters {
+        namespace docs {
+            namespace description {
+                let component: string;
+            }
+        }
+    }
+    let decorators: ((Story: any) => import("react/jsx-runtime").JSX.Element)[];
+}
+export default _default;

package/lib/Toast/index.d.ts

@@ -1,4 +1,4 @@
-import { type OptionsObject, type SnackbarMessage, type SnackbarKey, type SnackbarProviderProps } from 'notistack';
+import { OptionsObject, SnackbarMessage, SnackbarKey, SnackbarProviderProps } from 'notistack';
 declare function ToastProvider({ children, anchorOrigin, ...rest }: Omit<SnackbarProviderProps, 'ref' | 'action'>): import("react/jsx-runtime").JSX.Element;
 export { ToastProvider };
 declare const _default: {

package/lib/Toast/index.js

@@ -1,71 +1,50 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { createRef } from 'react';
-import { SnackbarProvider, useSnackbar } from 'notistack';
-import IconButton from '@mui/material/IconButton';
-import CloseIcon from '@mui/icons-material/Close';
-import noop from 'lodash/noop';
-let success = noop;
-let error = noop;
-let warning = noop;
-let info = noop;
-let close = noop;
-const genFn = (enqueueSnackbar, variant) => (message, opts = {}) => enqueueSnackbar(message, {
-  autoHideDuration: 5000,
-  variant,
-  ...opts
+import { jsxs as d, jsx as s } from "react/jsx-runtime";
+import { createRef as g } from "react";
+import { SnackbarProvider as b, useSnackbar as h } from "notistack";
+import { IconButton as S } from "@mui/material";
+import { Close as v } from "@mui/icons-material";
+import e from "lodash/noop";
+let l = e, u = e, f = e, m = e, p = e;
+const t = (o, r) => (i, n = {}) => o(i, {
+  autoHideDuration: 5e3,
+  variant: r,
+  ...n
 });
-function ToastProvider({
-  children,
-  anchorOrigin,
-  ...rest
-}) {
-  const notistackRef = /*#__PURE__*/createRef();
-  const onClickDismiss = key => () => {
-    notistackRef.current?.closeSnackbar(key);
+function H({ children: o, anchorOrigin: r, ...i }) {
+  const n = g(), k = (c) => () => {
+    var a;
+    (a = n.current) == null || a.closeSnackbar(c);
   };
-  return /*#__PURE__*/_jsxs(SnackbarProvider, {
-    anchorOrigin: {
-      vertical: 'top',
-      horizontal: 'right',
-      ...anchorOrigin
-    },
-    ...rest,
-    ref: notistackRef
-    // eslint-disable-next-line react/no-unstable-nested-components
-    ,
-    action: key => /*#__PURE__*/_jsx(IconButton, {
-      "aria-label": "close",
-      color: "inherit",
-      onClick: onClickDismiss(key),
-      size: "large",
-      children: /*#__PURE__*/_jsx(CloseIcon, {
-        style: {
-          fontSize: 16
-        }
-      })
-    }, "close"),
-    children: [/*#__PURE__*/_jsx(Toast, {}), children]
-  });
+  return /* @__PURE__ */ d(
+    b,
+    {
+      anchorOrigin: {
+        vertical: "top",
+        horizontal: "right",
+        ...r
+      },
+      ...i,
+      ref: n,
+      action: (c) => /* @__PURE__ */ s(S, { "aria-label": "close", color: "inherit", onClick: k(c), size: "large", children: /* @__PURE__ */ s(v, { style: { fontSize: 16 } }) }, "close"),
+      children: [
+        /* @__PURE__ */ s(w, {}),
+        o
+      ]
+    }
+  );
 }
-function Toast() {
-  const {
-    enqueueSnackbar,
-    closeSnackbar
-  } = useSnackbar();
-  success = genFn(enqueueSnackbar, 'success');
-  error = genFn(enqueueSnackbar, 'error');
-  warning = genFn(enqueueSnackbar, 'warning');
-  info = genFn(enqueueSnackbar, 'info');
-  close = closeSnackbar;
-  return null;
+function w() {
+  const { enqueueSnackbar: o, closeSnackbar: r } = h();
+  return l = t(o, "success"), u = t(o, "error"), f = t(o, "warning"), m = t(o, "info"), p = r, null;
 }
-export { ToastProvider };
-export default {
-  success: (message, options = {}) => success(message, options),
-  error: (message, options = {
-    autoHideDuration: 15000
-  }) => error(message, options),
-  warning: (message, options = {}) => warning(message, options),
-  info: (message, options = {}) => info(message, options),
-  close: key => close(key)
-};
+const P = {
+  success: (o, r = {}) => l(o, r),
+  error: (o, r = { autoHideDuration: 15e3 }) => u(o, r),
+  warning: (o, r = {}) => f(o, r),
+  info: (o, r = {}) => m(o, r),
+  close: (o) => p(o)
+};
+export {
+  H as ToastProvider,
+  P as default
+};

package/lib/Typography/index.d.ts

@@ -1,4 +1,4 @@
-import { type TypographyProps as MuiTypographyProps } from '@mui/material';
+import { TypographyProps as MuiTypographyProps } from '@mui/material';
 export interface TypographyProps extends MuiTypographyProps {
     fontSize?: string | number;
     minFontSize?: number;

package/lib/Typography/index.js

@@ -1,118 +1,82 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Typography as MuiTypography, Skeleton } from '@mui/material';
-import { useCreation, useReactive, useSize } from 'ahooks';
-import { useEffect, useRef } from 'react';
-const noop = (...args) => {};
-let minBrowserFontSize = -1;
-function detectMinimumFontSize() {
-  const testDiv = document.createElement('div');
-  Object.assign(testDiv.style, {
-    fontSize: '1px',
-    visibility: 'hidden',
-    position: 'absolute'
-  });
-  testDiv.textContent = 'Test';
-  document.body.appendChild(testDiv);
-  const size = parseFloat(getComputedStyle(testDiv).fontSize);
-  document.body.removeChild(testDiv);
-  return size;
+import { jsxs as g, jsx as a } from "react/jsx-runtime";
+import { Box as x, Typography as d, Skeleton as y } from "@mui/material";
+import { useReactive as C, useSize as c, useCreation as b } from "ahooks";
+import v from "lodash/noop";
+import { useRef as m, useEffect as w } from "react";
+let p = -1;
+function T() {
+  const t = document.createElement("div");
+  Object.assign(t.style, {
+    fontSize: "1px",
+    visibility: "hidden",
+    position: "absolute"
+  }), t.textContent = "Test", document.body.appendChild(t);
+  const f = parseFloat(getComputedStyle(t).fontSize);
+  return document.body.removeChild(t), f;
 }
-export default function Typography({
-  children = null,
-  minFontSize = 12,
+function M({
+  children: t = null,
+  minFontSize: f = 12,
   /* 设置为 auto 时字体会自动收缩，直到达到浏览器最小字体限制 */
-  fontSize,
-  sx,
-  onShrink = noop,
-  ...rest
+  fontSize: n,
+  sx: s,
+  onShrink: i = v,
+  ...r
 }) {
-  const refMock = useRef(null);
-  const refContainer = useRef(null);
-  const state = useReactive({
+  const u = m(null), z = m(null), e = C({
     // @ts-expect-error
-    fontSize,
-    loading: true
-  });
-  const mockSize = useSize(refMock.current);
-  const containerSize = useSize(refContainer.current);
-  useEffect(() => {
-    if (state.loading) {
-      if (fontSize === 'auto') {
-        if (mockSize && !state.initialSize) {
-          const styleSize = getComputedStyle(refMock.current).fontSize;
-          state.initialSize = Number(styleSize.replace('px', ''));
-          state.fontSize = state.initialSize;
+    fontSize: n,
+    loading: !0
+  }), o = c(u.current), l = c(z.current);
+  return w(() => {
+    if (e.loading)
+      if (n === "auto") {
+        if (o && !e.initialSize) {
+          const S = getComputedStyle(u.current).fontSize;
+          e.initialSize = Number(S.replace("px", "")), e.fontSize = e.initialSize;
         }
-        if (minBrowserFontSize < 0) {
-          minBrowserFontSize = detectMinimumFontSize();
-        }
-        // 达到浏览器最小字体限制，停止缩放
-        if (state.fontSize <= minBrowserFontSize) {
-          state.loading = false;
-          onShrink?.({
-            fontSize: state.fontSize,
-            initialSize: state.initialSize
-          });
-        } else if (containerSize && mockSize) {
-          // 超过容器宽度，尝试收缩
-          if (containerSize.width < mockSize.width && state.fontSize > minFontSize) {
-            state.fontSize--;
-          } else {
-            state.loading = false;
-            onShrink?.({
-              fontSize: state.fontSize,
-              initialSize: state.initialSize
-            });
+        p < 0 && (p = T()), e.fontSize <= p ? (e.loading = !1, i == null || i({ fontSize: e.fontSize, initialSize: e.initialSize })) : l && o && (l.width < o.width && e.fontSize > f ? e.fontSize-- : (e.loading = !1, i == null || i({ fontSize: e.fontSize, initialSize: e.initialSize })));
+      } else
+        e.loading = !1;
+  }, [n, o == null ? void 0 : o.width, l == null ? void 0 : l.width]), b(() => n === "auto" ? e.loading : !1, [n, e.loading]) ? /* @__PURE__ */ g(
+    x,
+    {
+      ref: z,
+      sx: {
+        flex: 1
+      },
+      children: [
+        /* @__PURE__ */ a(d, { ...r, sx: s, noWrap: !0, children: /* @__PURE__ */ a(y, { variant: "text", sx: { fontSize: "1rem" } }) }),
+        /* @__PURE__ */ a(
+          d,
+          {
+            ref: u,
+            ...r,
+            sx: {
+              ...s,
+              ...e.fontSize ? { fontSize: `${e.fontSize}px !important` } : {},
+              position: "fixed",
+              top: -1e3,
+              left: -1e3
+            },
+            noWrap: !0,
+            children: t
           }
-        }
-      } else {
-        state.loading = false;
-      }
+        )
+      ]
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [fontSize, mockSize?.width, containerSize?.width]);
-  const loading = useCreation(() => {
-    if (fontSize === 'auto') {
-      return state.loading;
-    }
-    return false;
-  }, [fontSize, state.loading]);
-  return loading ? /*#__PURE__*/_jsxs(Box, {
-    ref: refContainer,
-    flex: 1,
-    children: [/*#__PURE__*/_jsx(MuiTypography, {
-      ...rest,
-      sx: sx,
-      noWrap: true,
-      children: /*#__PURE__*/_jsx(Skeleton, {
-        variant: "text",
-        sx: {
-          fontSize: '1rem'
-        }
-      })
-    }), /*#__PURE__*/_jsx(MuiTypography, {
-      ref: refMock,
-      ...rest,
+  ) : /* @__PURE__ */ a(
+    d,
+    {
+      ...r,
       sx: {
-        ...sx,
-        ...(state.fontSize ? {
-          fontSize: `${state.fontSize}px !important`
-        } : {}),
-        position: 'fixed',
-        top: -1000,
-        left: -1000
+        ...s,
+        ...e.fontSize ? { fontSize: `${e.fontSize}px !important` } : {}
       },
-      noWrap: true,
-      children: children
-    })]
-  }) : /*#__PURE__*/_jsx(MuiTypography, {
-    ...rest,
-    sx: {
-      ...sx,
-      ...(state.fontSize ? {
-        fontSize: `${state.fontSize}px !important`
-      } : {})
-    },
-    children: children
-  });
-}
+      children: t
+    }
+  );
+}
+export {
+  M as default
+};

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { default as React } from 'react';
 import { UserCardProps, User } from '../types';
 interface AvatarOnlyCardProps extends Omit<UserCardProps, 'user'> {
     user: User;