@arcblock/ux 3.4.15 → 3.5.1

package/src/Theme/theme-provider.tsx

@@ -1,374 +0,0 @@
-import { createContext, useCallback, use, useEffect, useMemo, useState, useRef } from 'react';
-import {
-  GlobalStyles,
-  PaletteMode,
-  StyledEngineProvider,
-  ThemeProvider as MuiThemeProvider,
-  Theme,
-  ThemeOptions,
-  useTheme,
-  CssBaseline,
-} from '@mui/material';
-import { deepmerge } from '@mui/utils';
-import set from 'lodash/set';
-import isUndefined from 'lodash/isUndefined';
-import { useCreation, useDebounceFn } from 'ahooks';
-import {
-  BLOCKLET_THEME_PREFER_KEY,
-  getDefaultThemePrefer,
-  isValidThemeMode,
-  getBlockletThemeOptions,
-  type BlockletThemeMeta,
-} from '@blocklet/theme';
-
-import { useLocationState } from '../hooks/use-location-state';
-import { createTheme, isTheme, isUxTheme, lazyCreateDefaultTheme, type UxThemeOptions } from './theme';
-
-const defaultTheme = createTheme();
-
-/** 颜色模式上下文类型 */
-export interface ColorSchemeContextType {
-  mode: PaletteMode;
-  toggleMode: () => void;
-  changeMode: (mode: PaletteMode) => void;
-  prefer?: Prefer;
-}
-export type UxTheme = ThemeOptions | ((parentTheme: Theme, context?: { mode: PaletteMode }) => Theme);
-export type Prefer = 'light' | 'dark' | 'system';
-
-export const ColorSchemeContext = createContext<ColorSchemeContextType>({} as ColorSchemeContextType);
-export function useColorScheme() {
-  return use(ColorSchemeContext);
-}
-
-/** 根据偏好获取颜色模式 */
-const resolveMode = (prefer?: Prefer): PaletteMode => {
-  // 允许组件的 prefer 属性覆盖 blocklet theme 中配置的 prefer
-  if (prefer) {
-    if (prefer === 'system') {
-      return getDefaultThemePrefer({ theme: { prefer: 'system' } });
-    }
-    return prefer;
-  }
-
-  return getDefaultThemePrefer();
-};
-
-/** 深色模式全局样式 */
-function DarkSchemeStyles({ className = undefined }: { className?: string }) {
-  const theme = useTheme();
-
-  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 webKitCorner = prefix
-    ? `${prefix}::-webkit-scrollbar-corner, ${prefix} *::-webkit-scrollbar-corner`
-    : '*::-webkit-scrollbar-corner';
-  const firefoxSelector = prefix ? `${prefix}, ${prefix} *` : '*';
-
-  return (
-    <GlobalStyles
-      styles={{
-        // Chrome, Safari, Edge
-        '@supports selector(::-webkit-scrollbar)': {
-          [webkitScrollbar]: {
-            width: '12px',
-            height: '12px',
-          },
-          [webkitTrack]: {
-            background: trackColor,
-          },
-          [webkitThumb]: {
-            background: thumbColor,
-            borderRadius: '6px',
-            border: '2px solid',
-            borderColor: trackColor,
-            backgroundClip: 'padding-box',
-            '&:hover': {
-              background: theme.palette.grey[400],
-              backgroundClip: 'padding-box',
-            },
-          },
-          [webKitCorner]: {
-            background: trackColor,
-          },
-        },
-        // Firefox
-        '@supports not selector(::-webkit-scrollbar)': {
-          [firefoxSelector]: {
-            scrollbarWidth: 'auto',
-            scrollbarColor: `${thumbColor} ${trackColor}`,
-          },
-        },
-      }}
-    />
-  );
-}
-
-let injectedCssBaseline = false;
-const injectedDarkSchemeStylesMap: Record<string, boolean> = {};
-
-interface BaseThemeProviderProps {
-  children?: React.ReactNode;
-  theme?: UxTheme;
-  injectFirst?: boolean;
-  /** 指定一个类名，DarkSchemeStyles 只会作用于带有该类的元素及其后代 */
-  darkSchemeClass?: string;
-  /** 禁用样式缓存 */
-  disableStyleCache?: boolean;
-}
-/** 快速配置 MUI 主题 */
-function BaseThemeProvider({
-  children = null,
-  theme = defaultTheme,
-  injectFirst = true,
-  darkSchemeClass = '',
-  disableStyleCache = false,
-}: BaseThemeProviderProps) {
-  const _theme = useMemo(() => {
-    if (typeof theme === 'function') {
-      return theme;
-    }
-
-    if (isTheme(theme)) return theme;
-
-    // 是 ThemeOptions 则创建一个 theme
-    return createTheme(theme);
-  }, [theme]);
-
-  const cssBaseline = useCreation(() => {
-    if (disableStyleCache) return <CssBaseline />;
-
-    if (injectedCssBaseline) return null;
-    injectedCssBaseline = true;
-    return <CssBaseline />;
-  }, [disableStyleCache]);
-
-  const darkSchemeStyles = useCreation(() => {
-    if (disableStyleCache) return <DarkSchemeStyles className={darkSchemeClass} />;
-
-    if (injectedDarkSchemeStylesMap[darkSchemeClass]) return null;
-    injectedDarkSchemeStylesMap[darkSchemeClass] = true;
-    return <DarkSchemeStyles className={darkSchemeClass} />;
-  }, [darkSchemeClass, disableStyleCache]);
-
-  return (
-    // injectFirst 会影响 makeStyles 自定义样式和 mui styles 覆盖问题
-    <StyledEngineProvider injectFirst={injectFirst}>
-      <MuiThemeProvider theme={_theme}>
-        {cssBaseline}
-        {darkSchemeStyles}
-        {children}
-      </MuiThemeProvider>
-    </StyledEngineProvider>
-  );
-}
-
-interface ColorSchemeProviderProps extends BaseThemeProviderProps {
-  prefer?: Prefer;
-  disableBlockletTheme?: boolean;
-}
-/** 配置带颜色模式切换功能的 MUI 主题 */
-function ColorSchemeProvider({
-  children = null,
-  theme: themeInput = undefined,
-  prefer = undefined,
-  disableBlockletTheme = false,
-  ...rest
-}: ThemeProviderProps) {
-  const parentColorScheme = useColorScheme();
-  const [mode, setMode] = useState<PaletteMode>(() => resolveMode(prefer));
-  const [themeBuilderConfig, setThemeBuilderConfig] = useState<BlockletThemeMeta | null>(null);
-  const parentTheme = useTheme();
-  const location = useLocationState();
-  const metaThemeColorRef = useRef<HTMLMetaElement | null>(null);
-  const isTopColorScheme = isUndefined(parentColorScheme.toggleMode);
-
-  // 使用防抖函数包装 setThemeBuilderConfig，避免过于频繁的主题修改
-  const { run: debouncedSetThemeBuilderConfig } = useDebounceFn(
-    (config: BlockletThemeMeta | null) => {
-      setThemeBuilderConfig(config);
-    },
-    {
-      wait: 200,
-    }
-  );
-
-  const _themeInput = useMemo(() => {
-    let result: UxThemeOptions = {};
-
-    if (themeInput) {
-      const createBaseTheme = lazyCreateDefaultTheme(mode);
-
-      if (typeof themeInput === 'function') {
-        const baseTheme = createBaseTheme();
-
-        if (isUxTheme(parentTheme)) {
-          result = { ...themeInput(parentTheme, { mode }) };
-        } else {
-          result = { ...themeInput(baseTheme, { mode }) };
-        }
-      } else {
-        result = { ...themeInput };
-      }
-    }
-
-    // 接受 ThemeBuilder 配置
-    let _mode = mode;
-    if (themeBuilderConfig) {
-      _mode = themeBuilderConfig.mode || 'light';
-      result = deepmerge(result, getBlockletThemeOptions(_mode, themeBuilderConfig));
-    }
-
-    set(result, 'palette.mode', _mode);
-    set(result, 'mode', _mode);
-
-    return result;
-  }, [mode, themeInput, parentTheme, themeBuilderConfig]);
-
-  const theme = useMemo(() => {
-    return createTheme({ ..._themeInput, disableBlockletTheme: !!themeBuilderConfig || disableBlockletTheme });
-  }, [_themeInput, disableBlockletTheme, themeBuilderConfig]);
-
-  // 切换明/暗模式
-  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: PaletteMode) => {
-      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;
-    }
-  }, [theme.palette.background.default]);
-
-  // 监听来自 ThemeBuilder 的消息，支持 Blocklet 实时预览
-  useEffect(() => {
-    const handleMessage = (event: MessageEvent) => {
-      // 必须同源
-      if (event.origin !== window.origin) return;
-
-      if (event.data.type === 'THEME_BUILDER_CONFIG_CHANGED') {
-        debouncedSetThemeBuilderConfig(event.data.payload);
-      }
-    };
-
-    window.addEventListener('message', handleMessage);
-
-    return () => window.removeEventListener('message', handleMessage);
-  }, [debouncedSetThemeBuilderConfig]);
-
-  // 修改 document[data-theme] 属性
-  useEffect(() => {
-    if (isTopColorScheme) {
-      if (mode === 'dark') {
-        document.documentElement.setAttribute('data-theme', 'dark');
-      } else {
-        document.documentElement.removeAttribute('data-theme');
-      }
-    }
-  }, [isTopColorScheme, mode]);
-
-  return (
-    <ColorSchemeContext value={colorSchemeValue}>
-      <BaseThemeProvider theme={theme} {...rest}>
-        {children}
-      </BaseThemeProvider>
-    </ColorSchemeContext>
-  );
-}
-
-export interface ThemeProviderProps extends ColorSchemeProviderProps {
-  /** 下列情况会启用 ColorScheme 功能（让 theme 支持明暗模式切换）
-   * 1. 显示打开 enableColorScheme
-   * 2. 显示设置 prefer
-   * 3. 顶层 ThemeProvider
-   */
-  enableColorScheme?: boolean;
-}
-export default function ThemeProvider({
-  children = null,
-  prefer = undefined,
-  enableColorScheme = false,
-  ...props
-}: ThemeProviderProps) {
-  const { toggleMode } = useColorScheme();
-
-  if (enableColorScheme || prefer || !toggleMode) {
-    return (
-      <ColorSchemeProvider prefer={prefer} {...props}>
-        {children}
-      </ColorSchemeProvider>
-    );
-  }
-
-  return <BaseThemeProvider {...props}>{children}</BaseThemeProvider>;
-}

package/src/Theme/theme.ts

@@ -1,229 +0,0 @@
-/* eslint-disable no-shadow */
-// https://app.zeplin.io/styleguide/5d1436f1e97c2156f49c0725/colors
-import { createTheme as _createTheme, responsiveFontSizes, type PaletteMode } from '@mui/material';
-import webfontloader from 'webfontloader';
-import {
-  BLOCKLET_THEME_LIGHT,
-  BLOCKLET_THEME_DARK,
-  DEFAULT_FONTS,
-  mergeThemeOptions as deepmerge,
-  getDefaultThemePrefer,
-  getBlockletThemeOptions,
-  type ThemeOptions,
-  type Theme,
-} 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: any): obj is Theme {
-  return obj && typeof obj === 'object' && obj.palette && typeof obj.palette.getContrastText === 'function';
-}
-
-/** 是否是 UX Theme 对象 */
-export function isUxTheme(obj: any): obj is Theme {
-  return isTheme(obj) && obj.__isUxTheme__ === true;
-}
-
-// 收集字体配置
-export function collectFontFamilies(obj?: { fontFamily?: string }, fontSet: Set<string> = new Set()): Set<string> {
-  if (!obj || typeof obj !== 'object') return fontSet;
-
-  if (typeof obj.fontFamily === 'string') {
-    obj.fontFamily
-      .replace(/"/g, '')
-      .split(',')
-      .map((font: string) => font.trim())
-      .filter(Boolean)
-      .forEach((font: string) => fontSet.add(font));
-  }
-
-  Object.values(obj).forEach((value) => {
-    if (typeof value === 'object') {
-      collectFontFamilies(value, fontSet);
-    }
-  });
-
-  return fontSet;
-}
-
-// 动态加载字体
-const prevFonts = new Set<string>(DEFAULT_FONTS.concat('inherit')); // inherit 属于 MUI 特殊值，无需动态加载
-export function loadFonts(fonts: string[]) {
-  // 过滤出未加载的字体
-  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<boolean>((resolve) => {
-    webfontloader.load({
-      google: {
-        families: unloadedFonts,
-      },
-      active: () => resolve(true),
-      inactive: () => resolve(true),
-      fontinactive: (familyName, fvd) => {
-        prevFonts.delete(familyName);
-        console.warn(`font ${familyName} ${fvd} download failed`);
-      },
-    });
-  });
-}
-
-// 创建默认主题配置
-export function createDefaultThemeOptions(mode: PaletteMode = 'light') {
-  if (mode === 'dark') {
-    return BLOCKLET_THEME_DARK;
-  }
-
-  return BLOCKLET_THEME_LIGHT;
-}
-
-export interface UxThemeOptions extends ThemeOptions {
-  disableBlockletTheme?: boolean;
-}
-
-export function lazyCreateDefaultTheme(mode: PaletteMode) {
-  let theme: Theme | null = null;
-
-  return () => {
-    if (theme) return theme;
-
-    const options = deepmerge(createDefaultThemeOptions(mode), getBlockletThemeOptions(mode));
-
-    theme = _createTheme(options);
-    return theme;
-  };
-}
-
-// 主要处理 overrides
-const normalizeUserThemeOptions = ({ palette, components, overrides, ...rest }: UxThemeOptions) => {
-  const result: UxThemeOptions = {
-    palette,
-    components: {
-      ...overrides,
-      ...components,
-    },
-    ...rest,
-  };
-
-  return result;
-};
-
-const defaultUxThemeOptions: UxThemeOptions = {
-  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: Array<UxThemeOptions | ((baseTheme: Theme) => UxThemeOptions)>) => {
-  const defaultPrefer = getDefaultThemePrefer();
-  const createBaseTheme = lazyCreateDefaultTheme(defaultPrefer);
-  const userThemeOptions = args.reduce<UxThemeOptions>(
-    (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) as ThemeOptions[]
-  );
-
-  // 创建主题
-  const theme = _createTheme(mergedThemeOptions);
-  theme.__isUxTheme__ = true;
-
-  /**
-   * 支持响应式字体，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,
-    factor: 3,
-    variants: [
-      'h1',
-      'h2',
-      'h3',
-      'h4',
-      'h5',
-      'h6',
-      'subtitle1',
-      'subtitle2',
-      'body1',
-      'body2',
-      'caption',
-      'button',
-      'overline',
-    ],
-  });
-
-  // 异步加载字体
-  const fonts = collectFontFamilies(enhanced.typography);
-  loadFonts(Array.from(fonts));
-
-  return enhanced;
-};
-
-export const createTheme = create;
-export { deepmerge, deepmergeAll };

package/src/Toast/Toast.stories.jsx

@@ -1,28 +0,0 @@
-import { Box } from '@mui/material';
-import { ThemeProvider } from '../Theme';
-import { ThemeModeToggle } from '../Config';
-
-export { default as Basic } from './demo/basic';
-export { default as CustomOptions } from './demo/custom-options';
-export { default as ManualClose } from './demo/manual-close';
-
-export default {
-  title: 'Feedback/Toast',
-  parameters: {
-    docs: {
-      description: {
-        component: 'A `iamhosseindhv/notistack` wrapper used to display notifications on web apps.',
-      },
-    },
-  },
-  decorators: [
-    (Story) => (
-      <ThemeProvider prefer="system">
-        <Box>
-          <ThemeModeToggle />
-        </Box>
-        <Story />
-      </ThemeProvider>
-    ),
-  ],
-};

package/src/Toast/index.tsx

@@ -1,80 +0,0 @@
-import { createRef } from 'react';
-import {
-  type OptionsObject,
-  type ProviderContext,
-  type SnackbarMessage,
-  type VariantType,
-  type SnackbarKey,
-  type SnackbarProviderProps,
-  SnackbarProvider,
-  useSnackbar,
-} from 'notistack';
-import { IconButton } from '@mui/material';
-import { Close as CloseIcon } from '@mui/icons-material';
-import noop from 'lodash/noop';
-
-type EnqueueSnackbar = ProviderContext['enqueueSnackbar'];
-
-let success = noop as EnqueueSnackbar;
-let error = noop as EnqueueSnackbar;
-let warning = noop as EnqueueSnackbar;
-let info = noop as EnqueueSnackbar;
-let close: (key?: SnackbarKey) => void = noop;
-
-const genFn =
-  (enqueueSnackbar: EnqueueSnackbar, variant: VariantType) =>
-  (message: SnackbarMessage, opts: OptionsObject = {}) =>
-    enqueueSnackbar(message, {
-      autoHideDuration: 5000,
-      variant,
-      ...opts,
-    });
-
-function ToastProvider({ children, anchorOrigin, ...rest }: Omit<SnackbarProviderProps, 'ref' | 'action'>) {
-  const notistackRef = createRef<SnackbarProvider>();
-  const onClickDismiss = (key: SnackbarKey) => () => {
-    notistackRef.current?.closeSnackbar(key);
-  };
-
-  return (
-    <SnackbarProvider
-      anchorOrigin={{
-        vertical: 'top',
-        horizontal: 'right',
-        ...anchorOrigin,
-      }}
-      {...rest}
-      ref={notistackRef}
-      // eslint-disable-next-line react/no-unstable-nested-components
-      action={(key) => (
-        <IconButton key="close" aria-label="close" color="inherit" onClick={onClickDismiss(key)} size="large">
-          <CloseIcon style={{ fontSize: 16 }} />
-        </IconButton>
-      )}>
-      <Toast />
-      {children}
-    </SnackbarProvider>
-  );
-}
-
-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;
-}
-
-export { ToastProvider };
-
-export default {
-  success: (message: SnackbarMessage, options: OptionsObject = {}) => success(message, options),
-  error: (message: SnackbarMessage, options: OptionsObject = { autoHideDuration: 15000 }) => error(message, options),
-  warning: (message: SnackbarMessage, options: OptionsObject = {}) => warning(message, options),
-  info: (message: SnackbarMessage, options: OptionsObject = {}) => info(message, options),
-  close: (key?: SnackbarKey) => close(key),
-};