@arcblock/ux 2.13.70 → 3.0.0

package/lib/TextCollapse/index.js

@@ -1,53 +1,33 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Typography from '@mui/material/Typography';
-import { styled } from '../Theme';
-import { withDeprecated } from '../Util/deprecate';
-function TextCollapse({
-  children,
-  maxWidth,
-  startChars = 5,
-  endChars = 5,
-  scaleFactor = 0.45,
-  style,
-  fontType = 'normal',
-  ...rest
+import { jsxs as f, jsx as r } from "react/jsx-runtime";
+import { Typography as x } from "@mui/material";
+import { styled as y } from "../Theme/index.js";
+import { withDeprecated as u } from "../Util/deprecate.js";
+function g({
+  children: t,
+  maxWidth: s,
+  startChars: n = 5,
+  endChars: e = 5,
+  scaleFactor: o = 0.45,
+  style: a,
+  fontType: l = "normal",
+  ...p
 }) {
-  if (typeof children !== 'string') {
+  if (typeof t != "string")
     return null;
-  }
-  const isMonospace = fontType === 'monospace';
-
-  // 由于 css 样式产生的省略号长度是不确定的，所以目前 startChars 的长度只能让开发者自己去加上‘省略号’的宽度去设置这个值，要想完美的实现目标功能，最好是改用 js 动态修改文本内容来实现
-  const startWidth = isMonospace ? `${startChars}ch` : `${scaleFactor * (startChars + 3)}em`;
-  const endWidth = isMonospace ? `${endChars}ch` : `${scaleFactor * endChars}em`;
-  const styles = Object.assign(isMonospace ? {
-    fontFamily: '"Courier New", Courier, monospace'
-  } : {}, {
-    fontSize: 'inherit',
-    color: 'inherit',
-    fontWeight: 'inherit',
-    maxWidth
-  }, style);
-  const [startPart, endPart] = [children.slice(0, children.length - endChars), children.slice(children.length - endChars)];
-  return /*#__PURE__*/_jsxs(Container, {
-    component: "span",
-    style: styles,
-    startwidth: startWidth,
-    endwidth: endWidth,
-    ...rest,
-    children: [/*#__PURE__*/_jsx("span", {
-      className: "start-part",
-      children: startPart
-    }), /*#__PURE__*/_jsx("span", {
-      className: "end-part",
-      children: endPart
-    })]
-  });
+  const i = l === "monospace", c = i ? `${n}ch` : `${o * (n + 3)}em`, d = i ? `${e}ch` : `${o * e}em`, m = Object.assign(
+    i ? { fontFamily: '"Courier New", Courier, monospace' } : {},
+    { fontSize: "inherit", color: "inherit", fontWeight: "inherit", maxWidth: s },
+    a
+  ), [h, w] = [
+    t.slice(0, t.length - e),
+    t.slice(t.length - e)
+  ];
+  return /* @__PURE__ */ f($, { component: "span", style: m, startwidth: c, endwidth: d, ...p, children: [
+    /* @__PURE__ */ r("span", { className: "start-part", children: h }),
+    /* @__PURE__ */ r("span", { className: "end-part", children: w })
+  ] });
 }
-export default withDeprecated(TextCollapse, {
-  name: 'TextCollapse'
-});
-const Container = styled(Typography)`
+const T = u(g, { name: "TextCollapse" }), $ = y(x)`
   display: inline-flex;
   align-items: center;
   justify-content: start;
@@ -63,12 +43,15 @@ const Container = styled(Typography)`
     overflow: hidden;
   }
   .start-part {
-    max-width: calc(100% - ${props => props.endwidth});
-    min-width: ${props => props.startwidth};
+    max-width: calc(100% - ${(t) => t.endwidth});
+    min-width: ${(t) => t.startwidth};
     text-overflow: ellipsis;
   }
   .end-part {
-    max-width: calc(100% - ${props => props.startwidth});
+    max-width: calc(100% - ${(t) => t.startwidth});
     direction: rtl;
   }
-`;
+`;
+export {
+  T as default
+};

package/lib/Theme/Theme.stories.d.ts

@@ -0,0 +1,10 @@
+export { default as Palette } from './demo/palette';
+export { default as Typography } from './demo/typography';
+export { default as Shadows } from './demo/shadows';
+export { default as WithCustomKey } from './demo/with-custom-key';
+export { default as CustomFonts } from './demo/custom-fonts';
+export { default as UrlTheme } from './demo/url-theme';
+declare namespace _default {
+    let title: string;
+}
+export default _default;

package/lib/Theme/index.d.ts

@@ -1,5 +1,4 @@
-import type { CreateMUIStyled, Theme } from '@mui/material';
-import { useTheme } from '@mui/material';
+import { CreateMUIStyled, Theme, useTheme } from '@mui/material';
 export * from './theme';
 export * from './theme-provider';
 export { default as ThemeProvider } from './theme-provider';

package/lib/Theme/index.js

@@ -1,17 +1,25 @@
-import { styled as muiStyled, useTheme } from '@mui/material';
-export * from './theme';
-export * from './theme-provider';
-export { default as ThemeProvider } from './theme-provider';
-export { useTheme };
-const isTransientProp = prop => prop.startsWith('$');
-export const styled = (component, options) => {
-  return muiStyled(component, {
-    ...options,
-    shouldForwardProp: prop => {
-      if (options?.shouldForwardProp) {
-        return options.shouldForwardProp(prop) && !isTransientProp(prop);
-      }
-      return !isTransientProp(prop);
-    }
-  });
-};
+import { styled as a } from "@mui/material";
+import { useTheme as h } from "@mui/material";
+import { collectFontFamilies as c, create as f, createDefaultThemeOptions as T, createTheme as x, isTheme as F, isUxTheme as i, lazyCreateDefaultTheme as n, loadFonts as P } from "./theme.js";
+import { ColorSchemeContext as C, default as w, useColorScheme as p } from "./theme-provider.js";
+import { deepmerge as S } from "@mui/utils";
+const o = (r) => r.startsWith("$"), l = (r, e) => a(r, {
+  ...e,
+  shouldForwardProp: (t) => e != null && e.shouldForwardProp ? e.shouldForwardProp(t) && !o(t) : !o(t)
+});
+export {
+  C as ColorSchemeContext,
+  w as ThemeProvider,
+  c as collectFontFamilies,
+  f as create,
+  T as createDefaultThemeOptions,
+  x as createTheme,
+  S as deepmerge,
+  F as isTheme,
+  i as isUxTheme,
+  n as lazyCreateDefaultTheme,
+  P as loadFonts,
+  l as styled,
+  p as useColorScheme,
+  h as useTheme
+};

package/lib/Theme/theme-provider.d.ts

@@ -1,6 +1,4 @@
-import PropTypes from 'prop-types';
-import { PaletteMode } from '@mui/material';
-import { Theme, ThemeOptions } from '@mui/material/styles';
+import { PaletteMode, Theme, ThemeOptions } from '@mui/material';
 /** 颜色模式上下文类型 */
 export interface ColorSchemeContextType {
     mode: PaletteMode;
@@ -8,7 +6,7 @@ export interface ColorSchemeContextType {
     changeMode: (mode: PaletteMode) => void;
     prefer?: Prefer;
 }
-export declare const ColorSchemeContext: import("react").Context<ColorSchemeContextType>;
+export declare const ColorSchemeContext: import('react').Context<ColorSchemeContextType>;
 export declare function useColorScheme(): ColorSchemeContextType;
 export type UxTheme = ThemeOptions | ((parentTheme: Theme, context?: {
     mode: PaletteMode;
@@ -33,14 +31,5 @@ export interface ThemeProviderProps extends ColorSchemeProviderProps {
      */
     enableColorScheme?: boolean;
 }
-declare function ThemeProvider({ children, prefer, enableColorScheme, ...props }: ThemeProviderProps): import("react/jsx-runtime").JSX.Element;
-declare namespace ThemeProvider {
-    var propTypes: {
-        children: PropTypes.Requireable<any>;
-        theme: PropTypes.Requireable<any>;
-        injectFirst: PropTypes.Requireable<boolean>;
-        darkSchemeClass: PropTypes.Requireable<string>;
-        enableColorScheme: PropTypes.Requireable<boolean>;
-    };
-}
-export default ThemeProvider;
+export default function ThemeProvider({ children, prefer, enableColorScheme, ...props }: ThemeProviderProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/Theme/theme-provider.js

@@ -1,250 +1,129 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { createContext, useCallback, useContext, useEffect, useMemo, useState, useRef } from 'react';
-import PropTypes from 'prop-types';
-import { GlobalStyles } from '@mui/material';
-import { ThemeProvider as MuiThemeProvider, useTheme, StyledEngineProvider } from '@mui/material/styles';
-import CssBaseline from '@mui/material/CssBaseline';
-import set from 'lodash/set';
-import { BLOCKLET_THEME_PREFER_KEY, getDefaultThemePrefer, isValidThemeMode } from '@blocklet/theme';
-import useLocationState from '../hooks/use-location-state';
-import { createTheme, isTheme, isUxTheme, lazyCreateDefaultTheme } from './theme';
-const defaultTheme = createTheme();
-
-/** 颜色模式上下文类型 */
-
-export const ColorSchemeContext = /*#__PURE__*/createContext({});
-export function useColorScheme() {
-  return useContext(ColorSchemeContext);
+import { jsx as i, jsxs as R } from "react/jsx-runtime";
+import { createContext as _, use as B, useState as L, useRef as j, useMemo as h, useCallback as C, useEffect as k } from "react";
+import { useTheme as $, StyledEngineProvider as D, ThemeProvider as K, CssBaseline as U, GlobalStyles as V } from "@mui/material";
+import w from "lodash/set";
+import { BLOCKLET_THEME_PREFER_KEY as d, isValidThemeMode as W, getDefaultThemePrefer as x } from "@blocklet/theme";
+import { useLocationState as q } from "../hooks/use-location-state.js";
+import { createTheme as g, lazyCreateDefaultTheme as z, isUxTheme as A, isTheme as F } from "./theme.js";
+const G = g(), v = _({});
+function H() {
+  return B(v);
 }
-
-/** 根据偏好获取颜色模式 */
-const resolveMode = prefer => {
-  // 允许组件的 prefer 属性覆盖 blocklet theme 中配置的 prefer
-  if (prefer) {
-    if (prefer === 'system') {
-      return getDefaultThemePrefer({
-        theme: {
-          prefer: 'system'
-        }
-      });
-    }
-    return prefer;
-  }
-  return getDefaultThemePrefer();
-};
-
-/** 深色模式全局样式 */
-function DarkSchemeStyles({
-  className
-}) {
-  const theme = useTheme();
-  if (theme.palette.mode === 'dark') {
-    const trackColor = 'transparent';
-    const thumbColor = theme.palette.grey[300];
-
-    // 处理作用域选择器
-    const prefix = (className || '').trim().split(/\s+/).filter(Boolean).map(c => c.startsWith('.') ? c : `.${c}`).join(' ');
-    const webkitScrollbar = prefix ? `${prefix}::-webkit-scrollbar, ${prefix} *::-webkit-scrollbar` : '*::-webkit-scrollbar';
-    const webkitTrack = prefix ? `${prefix}::-webkit-scrollbar-track, ${prefix} *::-webkit-scrollbar-track` : '*::-webkit-scrollbar-track';
-    const webkitThumb = prefix ? `${prefix}::-webkit-scrollbar-thumb, ${prefix} *::-webkit-scrollbar-thumb` : '*::-webkit-scrollbar-thumb';
-    const firefoxSelector = prefix ? `${prefix}, ${prefix} *` : '*';
-    return /*#__PURE__*/_jsx(GlobalStyles, {
-      styles: {
-        // Chrome, Safari, Edge
-        '@supports selector(::-webkit-scrollbar)': {
-          [webkitScrollbar]: {
-            width: '12px',
-            height: '12px'
-          },
-          [webkitTrack]: {
-            background: trackColor
+const y = (c) => c ? c === "system" ? x({ theme: { prefer: "system" } }) : c : x();
+function I({ className: c }) {
+  const e = $();
+  if (e.palette.mode === "dark") {
+    const s = "transparent", l = e.palette.grey[300], r = (c || "").trim().split(/\s+/).filter(Boolean).map((n) => n.startsWith(".") ? n : `.${n}`).join(" "), o = r ? `${r}::-webkit-scrollbar, ${r} *::-webkit-scrollbar` : "*::-webkit-scrollbar", a = r ? `${r}::-webkit-scrollbar-track, ${r} *::-webkit-scrollbar-track` : "*::-webkit-scrollbar-track", u = r ? `${r}::-webkit-scrollbar-thumb, ${r} *::-webkit-scrollbar-thumb` : "*::-webkit-scrollbar-thumb", b = r ? `${r}, ${r} *` : "*";
+    return /* @__PURE__ */ i(
+      V,
+      {
+        styles: {
+          // Chrome, Safari, Edge
+          "@supports selector(::-webkit-scrollbar)": {
+            [o]: {
+              width: "12px",
+              height: "12px"
+            },
+            [a]: {
+              background: s
+            },
+            [u]: {
+              background: l,
+              borderRadius: "6px",
+              border: "2px solid",
+              borderColor: s,
+              backgroundClip: "padding-box",
+              "&:hover": {
+                background: e.palette.grey[400],
+                backgroundClip: "padding-box"
+              }
+            }
           },
-          [webkitThumb]: {
-            background: thumbColor,
-            borderRadius: '6px',
-            border: '2px solid',
-            borderColor: trackColor,
-            backgroundClip: 'padding-box',
-            '&:hover': {
-              background: theme.palette.grey[400],
-              backgroundClip: 'padding-box'
+          // Firefox
+          "@supports not selector(::-webkit-scrollbar)": {
+            [b]: {
+              scrollbarWidth: "auto",
+              scrollbarColor: `${l} ${s}`
             }
           }
-        },
-        // Firefox
-        '@supports not selector(::-webkit-scrollbar)': {
-          [firefoxSelector]: {
-            scrollbarWidth: 'auto',
-            scrollbarColor: `${thumbColor} ${trackColor}`
-          }
         }
       }
-    });
+    );
   }
   return null;
 }
-/** 快速配置 MUI 主题 */
-function BaseThemeProvider({
-  children,
-  theme = defaultTheme,
-  injectFirst = true,
-  darkSchemeClass = ''
+function E({
+  children: c,
+  theme: e = G,
+  injectFirst: s = !0,
+  darkSchemeClass: l = ""
 }) {
-  const _theme = useMemo(() => {
-    if (typeof theme === 'function') {
-      return theme;
-    }
-    if (isTheme(theme)) return theme;
-
-    // 是 ThemeOptions 则创建一个 theme
-    return createTheme(theme);
-  }, [theme]);
+  const r = h(() => typeof e == "function" || F(e) ? e : g(e), [e]);
   return (
-    /*#__PURE__*/
     // injectFirst 会影响 makeStyles 自定义样式和 mui styles 覆盖问题
-    _jsx(StyledEngineProvider, {
-      injectFirst: injectFirst,
-      children: /*#__PURE__*/_jsxs(MuiThemeProvider, {
-        theme: _theme,
-        children: [/*#__PURE__*/_jsx(CssBaseline, {}), /*#__PURE__*/_jsx(DarkSchemeStyles, {
-          className: darkSchemeClass
-        }), children]
-      })
-    })
+    /* @__PURE__ */ i(D, { injectFirst: s, children: /* @__PURE__ */ R(K, { theme: r, children: [
+      /* @__PURE__ */ i(U, {}),
+      /* @__PURE__ */ i(I, { className: l }),
+      c
+    ] }) })
   );
 }
-/** 配置带颜色模式切换功能的 MUI 主题 */
-function ColorSchemeProvider({
-  children,
-  theme: themeInput,
-  prefer,
-  disableBlockletTheme = false,
-  ...rest
+function N({
+  children: c,
+  theme: e,
+  prefer: s,
+  disableBlockletTheme: l = !1,
+  ...r
 }) {
-  const [mode, setMode] = useState(() => resolveMode(prefer));
-  const parentTheme = useTheme();
-  const location = useLocationState();
-  const metaThemeColorRef = useRef(null);
-  const _themeInput = useMemo(() => {
-    let result = {};
-    const createBaseTheme = lazyCreateDefaultTheme(mode);
-    if (themeInput) {
-      if (typeof themeInput === 'function') {
-        const baseTheme = createBaseTheme();
-        if (isUxTheme(parentTheme)) {
-          result = {
-            ...themeInput(parentTheme, {
-              mode
-            })
-          };
-        } else {
-          result = {
-            ...themeInput(baseTheme, {
-              mode
-            })
-          };
-        }
-      } else {
-        result = {
-          ...themeInput
-        };
-      }
-    }
-    set(result, 'palette.mode', mode);
-    set(result, 'mode', mode);
-    return result;
-  }, [mode, themeInput, parentTheme]);
-  const theme = useMemo(() => {
-    return createTheme({
-      ..._themeInput,
-      disableBlockletTheme
-    });
-  }, [_themeInput, disableBlockletTheme]);
-
-  // 切换明/暗模式
-  const toggleMode = useCallback(() => {
-    const newMode = mode === 'light' ? 'dark' : 'light';
-    setMode(newMode);
-    sessionStorage.removeItem(BLOCKLET_THEME_PREFER_KEY);
-    localStorage.setItem(BLOCKLET_THEME_PREFER_KEY, newMode);
-  }, [mode, setMode]);
-  const changeMode = useCallback(newMode => {
-    if (mode !== newMode) {
-      setMode(newMode);
-      sessionStorage.removeItem(BLOCKLET_THEME_PREFER_KEY);
-      localStorage.setItem(BLOCKLET_THEME_PREFER_KEY, newMode);
-    }
-  }, [mode, setMode]);
-  const colorSchemeValue = useMemo(() => ({
-    mode,
-    toggleMode,
-    changeMode,
-    prefer
-  }), [mode, prefer, toggleMode, changeMode]);
-
-  // 相应 prefer 或 urlTheme 的改变
-  useEffect(() => {
-    setMode(resolveMode(prefer));
-  }, [prefer, setMode, location.search]);
-
-  // 会话缓存 urlTheme 便于 App Launching 阶段临时统一 theme mode
-  useEffect(() => {
-    const urlTheme = new URLSearchParams(location.search).get('theme');
-    if (isValidThemeMode(urlTheme)) {
-      sessionStorage.setItem(BLOCKLET_THEME_PREFER_KEY, urlTheme);
-    }
-  }, [location.search]);
-
-  // 动态设置 <meta name="theme-color" content="..."> 标签，用于控制移动端浏览器状态栏颜色
-  useEffect(() => {
-    if (!metaThemeColorRef.current) {
-      metaThemeColorRef.current = document.querySelector('meta[name="theme-color"]');
-    }
-    const bgcolor = theme.palette.background.default;
-    if (metaThemeColorRef.current) {
-      metaThemeColorRef.current.setAttribute('content', bgcolor);
-    } else {
-      const meta = document.createElement('meta');
-      meta.name = 'theme-color';
-      meta.content = bgcolor;
-      document.head.appendChild(meta);
-      metaThemeColorRef.current = meta;
+  const [o, a] = L(() => y(s)), u = $(), b = q(), n = j(null), p = h(() => {
+    let t = {};
+    const m = z(o);
+    if (e)
+      if (typeof e == "function") {
+        const M = m();
+        A(u) ? t = { ...e(u, { mode: o }) } : t = { ...e(M, { mode: o }) };
+      } else
+        t = { ...e };
+    return w(t, "palette.mode", o), w(t, "mode", o), t;
+  }, [o, e, u]), f = h(() => g({ ...p, disableBlockletTheme: l }), [p, l]), T = C(() => {
+    const t = o === "light" ? "dark" : "light";
+    a(t), sessionStorage.removeItem(d), localStorage.setItem(d, t);
+  }, [o, a]), S = C(
+    (t) => {
+      o !== t && (a(t), sessionStorage.removeItem(d), localStorage.setItem(d, t));
+    },
+    [o, a]
+  ), P = h(
+    () => ({
+      mode: o,
+      toggleMode: T,
+      changeMode: S,
+      prefer: s
+    }),
+    [o, s, T, S]
+  );
+  return k(() => {
+    a(y(s));
+  }, [s, a, b.search]), k(() => {
+    const t = new URLSearchParams(b.search).get("theme");
+    W(t) && sessionStorage.setItem(d, t);
+  }, [b.search]), k(() => {
+    n.current || (n.current = document.querySelector('meta[name="theme-color"]'));
+    const t = f.palette.background.default;
+    if (n.current)
+      n.current.setAttribute("content", t);
+    else {
+      const m = document.createElement("meta");
+      m.name = "theme-color", m.content = t, document.head.appendChild(m), n.current = m;
     }
-  }, [theme.palette.background.default]);
-  return /*#__PURE__*/_jsx(ColorSchemeContext.Provider, {
-    value: colorSchemeValue,
-    children: /*#__PURE__*/_jsx(BaseThemeProvider, {
-      theme: theme,
-      ...rest,
-      children: children
-    })
-  });
+  }, [f.palette.background.default]), /* @__PURE__ */ i(v, { value: P, children: /* @__PURE__ */ i(E, { theme: f, ...r, children: c }) });
 }
-export default function ThemeProvider({
-  children,
-  prefer,
-  enableColorScheme = false,
-  ...props
-}) {
-  const {
-    toggleMode
-  } = useColorScheme();
-  if (enableColorScheme || prefer || !toggleMode) {
-    return /*#__PURE__*/_jsx(ColorSchemeProvider, {
-      prefer: prefer,
-      ...props,
-      children: children
-    });
-  }
-  return /*#__PURE__*/_jsx(BaseThemeProvider, {
-    ...props,
-    children: children
-  });
+function te({ children: c, prefer: e, enableColorScheme: s = !1, ...l }) {
+  const { toggleMode: r } = H();
+  return s || e || !r ? /* @__PURE__ */ i(N, { prefer: e, ...l, children: c }) : /* @__PURE__ */ i(E, { ...l, children: c });
 }
-ThemeProvider.propTypes = {
-  children: PropTypes.any,
-  theme: PropTypes.any,
-  injectFirst: PropTypes.bool,
-  darkSchemeClass: PropTypes.string,
-  enableColorScheme: PropTypes.bool
-};
+export {
+  v as ColorSchemeContext,
+  te as default,
+  H as useColorScheme
+};

package/lib/Theme/theme.d.ts

@@ -1,12 +1,5 @@
-import type { PaletteMode, Theme } from '@mui/material';
-import { type ThemeOptions } from '@mui/material/styles';
+import { ThemeOptions, PaletteMode, Theme } from '@mui/material';
 import { deepmerge } from '@mui/utils';
-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 declare function isTheme(obj: any): obj is Theme;
 /** 是否是 UX Theme 对象 */