@arcblock/ux 2.10.65 → 2.10.67

package/src/NavMenu/{nav-menu.jsx → nav-menu.tsx}

@@ -1,3 +1,4 @@
+/* eslint-disable no-unused-vars */
 import {
   Children,
   cloneElement,
@@ -7,42 +8,85 @@ import {
   useRef,
   forwardRef,
   useLayoutEffect,
+  isValidElement,
 } from 'react';
-import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { MoreHoriz as MoreHorizIcon, ExpandMore as ExpandMoreIcon, Menu as MenuIcon } from '@mui/icons-material';
 import { useCreation, useMemoizedFn, useReactive, useSize, useThrottleFn } from 'ahooks';
 import { HorizontalStyle, InlineStyle } from './style';
 
-const NavMenuContext = createContext();
+const NavMenuContext = createContext<{
+  activeId: string | null;
+  openedIds: string[];
+  hiddenItemCount: number;
+  mode: 'horizontal' | 'vertical' | 'inline';
+  activate: (id: string) => void;
+  open: (id: string) => void;
+  close: (id: string) => void;
+} | null>(null);
 
 // 过滤 children 中的 Item/Sub, 忽略其它类型的 element
-function filterItems(children) {
+function filterItems(children: React.ReactNode) {
   if (children) {
     // eslint-disable-next-line no-use-before-define
-    return Children.toArray(children).filter((child) => child.type === Item || child.type === Sub);
+    return Children.toArray(children).filter((child) => {
+      if (!isValidElement(child)) {
+        return false;
+      }
+      return child.type === Item || child.type === Sub;
+    }) as React.ReactElement[];
   }
   return null;
 }
 
-function useUniqueId(id) {
+function useUniqueId(id?: string) {
   const _id = useRef(id || `navmenu-item-id-${Math.random().toString(36).slice(2)}`);
   return _id.current;
 }
 
+export type ItemOptions = {
+  id?: string;
+  icon?: React.ReactNode;
+  label?: React.ReactNode;
+  active?: boolean;
+  children?: ItemOptions[];
+};
+
+export interface NavMenuProps extends React.HTMLAttributes<HTMLElement> {
+  items?: ItemOptions[];
+  mode?: 'horizontal' | 'vertical' | 'inline';
+  children?: React.ReactNode;
+  activeId?: string | null;
+  textColor?: string;
+  activeTextColor?: string;
+  bgColor?: string;
+  // eslint-disable-next-line no-unused-vars
+  onSelected?: (id: string) => void;
+}
+
 /**
  * NavMenu, 导航组件, 可用于 header/footer/sidebar
  */
-function NavMenu({ items, mode, children, activeId, textColor, activeTextColor, bgColor, onSelected, ...rest }) {
+function NavMenu({
+  items = [],
+  mode = 'horizontal',
+  children: _childs = null,
+  activeId = null,
+  textColor = '#9397a1',
+  activeTextColor = '#25292f',
+  bgColor = '#fff',
+  onSelected,
+  ...rest
+}: NavMenuProps) {
   // eslint-disable-next-line no-param-reassign
-  children = filterItems(children);
+  const children = filterItems(_childs);
   if (!items?.length && !children?.length) {
     throw new Error("One of 'items' or 'children' is required by NavMenu component.");
   }
 
   const currentState = useReactive({
     activeId,
-    openedIds: [],
+    openedIds: [] as string[],
     hiddenItemCount: 0,
   });
 
@@ -50,7 +94,7 @@ function NavMenu({ items, mode, children, activeId, textColor, activeTextColor,
     currentState.activeId = id;
     onSelected?.(id);
   });
-  const open = useMemoizedFn((id) => {
+  const open = useMemoizedFn((id: string) => {
     currentState.openedIds.push(id);
   });
   const close = useMemoizedFn((id) => {
@@ -67,9 +111,9 @@ function NavMenu({ items, mode, children, activeId, textColor, activeTextColor,
     };
   }, [currentState.activeId, currentState.hiddenItemCount, currentState.openedIds, mode, activate, open, close]);
 
-  const navMenuRef = useRef();
-  const itemRefs = useRef([]);
-  const moreIconRef = useRef();
+  const navMenuRef = useRef<HTMLUListElement | null>(null);
+  const itemRefs = useRef<HTMLElement[]>([]);
+  const moreIconRef = useRef<HTMLLIElement | null>(null);
   const isAllItemsHidden = currentState.hiddenItemCount === itemRefs.current?.length;
   const style = isAllItemsHidden ? { marginLeft: '0px' } : undefined;
 
@@ -77,10 +121,10 @@ function NavMenu({ items, mode, children, activeId, textColor, activeTextColor,
     return isAllItemsHidden ? <MenuIcon /> : <MoreHorizIcon />;
   }, [isAllItemsHidden]);
 
-  const renderChildrenWithRef = (childrenElement) => {
+  const renderChildrenWithRef = (childrenElement: React.ReactElement[]) => {
     return Children.map(childrenElement, (child, index) => {
       return cloneElement(child, {
-        ref: (el) => {
+        ref: (el: HTMLElement) => {
           itemRefs.current[index] = el;
         },
       });
@@ -153,7 +197,7 @@ function NavMenu({ items, mode, children, activeId, textColor, activeTextColor,
 
   const classes = clsx('navmenu', `navmenu--${mode}`, rest.className);
 
-  const renderItem = (item, index, isTopLevel = false) => {
+  const renderItem = (item: ItemOptions, index: number, isTopLevel = false) => {
     if (item?.children) {
       // 对于 Sub 组件，如果它是顶级组件，则包含 ref
       return (
@@ -165,11 +209,11 @@ function NavMenu({ items, mode, children, activeId, textColor, activeTextColor,
           ref={
             isTopLevel
               ? (el) => {
-                  itemRefs.current[index] = el;
+                  itemRefs.current[index] = el!;
                 }
               : undefined
           }>
-          {item.children.map((childItem, childIndex) => renderItem(childItem, childIndex, false))}
+          {item.children.map((childItem, childIndex: number) => renderItem(childItem, childIndex, false))}
         </Sub>
       );
     }
@@ -185,7 +229,7 @@ function NavMenu({ items, mode, children, activeId, textColor, activeTextColor,
         ref={
           isTopLevel
             ? (el) => {
-                itemRefs.current[index] = el;
+                itemRefs.current[index] = el!;
               }
             : undefined
         }
@@ -208,7 +252,7 @@ function NavMenu({ items, mode, children, activeId, textColor, activeTextColor,
         $activeTextColor={activeTextColor}
         $bgColor={bgColor}>
         <ul className="navmenu-root" ref={navMenuRef}>
-          {items ? items.map((item, index) => renderItem(item, index, true)) : renderChildrenWithRef(children)}
+          {items ? items.map((item, index) => renderItem(item, index, true)) : renderChildrenWithRef(children || [])}
           {currentState.hiddenItemCount > 0 && (
             <Sub expandIcon={false} icon={icon} label="" ref={moreIconRef} style={style}>
               {content}
@@ -220,139 +264,112 @@ function NavMenu({ items, mode, children, activeId, textColor, activeTextColor,
   );
 }
 
-NavMenu.propTypes = {
-  items: PropTypes.array,
-  // 默认水平方向布局,
-  // inline 模式: 垂直布局, 且通过 click 事件来收缩/伸展子菜单, 适用于移动端
-  mode: PropTypes.oneOf(['horizontal', 'vertical', 'inline']),
-  children: PropTypes.array,
-  activeId: PropTypes.string,
-  textColor: PropTypes.string,
-  activeTextColor: PropTypes.string,
-  bgColor: PropTypes.string,
-  onSelected: PropTypes.func,
-};
-NavMenu.defaultProps = {
-  items: null,
-  mode: 'horizontal',
-  children: null,
-  activeId: null,
-  textColor: '#9397a1',
-  activeTextColor: '#25292f',
-  bgColor: '#fff',
-  onSelected: null,
-};
-
-/**
- * Item
- */
-const Item = forwardRef(({ id: _id, icon, label, active, onClick, ...rest }, ref) => {
-  const id = useUniqueId(_id);
-  const { activeId, activate } = useContext(NavMenuContext);
-  const classes = clsx('navmenu-item', { 'navmenu-item--active': activeId === id }, rest.className);
-
-  useEffect(() => {
-    if (active) {
-      activate(id);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [active]);
+export interface ItemProps extends React.HTMLAttributes<HTMLLIElement> {
+  id?: string;
+  icon?: React.ReactNode;
+  label?: React.ReactNode;
+  active?: boolean;
+  onClick?: () => void;
+}
 
-  const handleClick = () => {
-    onClick?.();
-    activate(id);
-  };
+const Item = forwardRef<HTMLLIElement, ItemProps>(
+  ({ id: _id = '', icon = null, label = '', active = false, onClick = null, ...rest }, ref) => {
+    const id = useUniqueId(_id);
+    const { activeId, activate } = useContext(NavMenuContext) || {};
+    const classes = clsx('navmenu-item', { 'navmenu-item--active': activeId === id }, rest.className);
 
-  return (
-    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
-    <li {...rest} className={classes} onClick={handleClick} ref={ref}>
-      {icon && <span className="navmenu-item-icon">{icon}</span>}
-      <span className="navmenu-item-label">{label}</span>
-    </li>
-  );
-});
-
-Item.propTypes = {
-  id: PropTypes.string,
-  icon: PropTypes.element,
-  label: PropTypes.node,
-  active: PropTypes.bool,
-  onClick: PropTypes.func,
-};
+    useEffect(() => {
+      if (active) {
+        activate?.(id);
+      }
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [active]);
 
-Item.defaultProps = {
-  id: null,
-  icon: null,
-  label: '',
-  active: false,
-  onClick: null,
-};
+    const handleClick = () => {
+      onClick?.();
+      activate?.(id);
+    };
 
-/**
- * Sub
- */
-const Sub = forwardRef(({ id: _id, icon, label, children, expandIcon, ...rest }, ref) => {
-  const id = useUniqueId(_id);
-  const { openedIds, open, close, mode } = useContext(NavMenuContext);
-  const isOpen = openedIds.includes(id);
-  const classes = clsx('navmenu-sub', { 'navmenu-sub--opened': isOpen }, rest.className);
-  const isInlineMode = mode === 'inline';
-  // inline mode 时使用 click 事件控制收缩/伸展子菜单
-  const props = isInlineMode
-    ? {
-        onClick: () => {
-          if (openedIds.includes(id)) {
-            close(id);
-          } else {
-            open(id);
-          }
-        },
-      }
-    : {
-        onMouseEnter: () => open(id),
-        onMouseLeave: () => close(id),
-      };
-  // inline mode, 避免点击子菜单项时触发父菜单的 open/close
-  const containerProps = isInlineMode
-    ? {
-        onClick: (e) => e.stopPropagation(),
-      }
-    : {};
+    return (
+      // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+      <li {...rest} className={classes} onClick={handleClick} ref={ref}>
+        {icon && <span className="navmenu-item-icon">{icon}</span>}
+        <span className="navmenu-item-label">{label}</span>
+      </li>
+    );
+  }
+);
+
+export interface SubProps extends React.HTMLAttributes<HTMLLIElement> {
+  id?: string;
+  icon?: React.ReactNode;
+  label?: React.ReactNode;
+  children?: Array<React.ReactElement>;
+  // eslint-disable-next-line no-unused-vars
+  expandIcon?: React.ReactNode | ((props: { isOpen: boolean }) => React.ReactNode);
+}
 
-  return (
-    <li {...rest} className={classes} {...props} ref={ref}>
-      {icon && <span className="navmenu-sub-icon">{icon}</span>}
-      <span className="navmenu-sub-label">{label}</span>
-      {expandIcon && <span className="navmenu-sub-expand-icon">{expandIcon?.({ isOpen }) || expandIcon}</span>}
-      <div className="navmenu-sub-container" {...containerProps}>
-        <ul className="navmenu-sub-list">{filterItems(children)}</ul>
-      </div>
-    </li>
-  );
-});
-
-Sub.propTypes = {
-  id: PropTypes.string,
-  icon: PropTypes.element,
-  label: PropTypes.node.isRequired,
-  children: PropTypes.array.isRequired,
-  expandIcon: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
-};
+const Sub = forwardRef<HTMLLIElement, SubProps>(
+  (
+    {
+      id: _id = '',
+      icon = null,
+      label = null,
+      children,
+      expandIcon = ({ isOpen }) => (
+        <ExpandMoreIcon
+          style={{
+            transform: `rotate(${isOpen ? 180 : 0}deg)`,
+          }}
+        />
+      ),
+      ...rest
+    },
+    ref
+  ) => {
+    const id = useUniqueId(_id);
+    const { openedIds, open, close, mode } = useContext(NavMenuContext) || {};
+    const isOpen = openedIds?.includes(id) ?? false;
+    const classes = clsx('navmenu-sub', { 'navmenu-sub--opened': isOpen }, rest.className);
+    const isInlineMode = mode === 'inline';
+    // inline mode 时使用 click 事件控制收缩/伸展子菜单
+    const props = isInlineMode
+      ? {
+          onClick: () => {
+            if (openedIds?.includes(id)) {
+              close?.(id);
+            } else {
+              open?.(id);
+            }
+          },
+        }
+      : {
+          onMouseEnter: () => open?.(id),
+          onMouseLeave: () => close?.(id),
+        };
+    // inline mode, 避免点击子菜单项时触发父菜单的 open/close
+    const containerProps = isInlineMode
+      ? {
+          onClick: (e: React.MouseEvent) => e.stopPropagation(),
+        }
+      : {};
 
-Sub.defaultProps = {
-  id: null,
-  icon: null,
-  // eslint-disable-next-line react/prop-types
-  expandIcon: ({ isOpen }) => {
     return (
-      <ExpandMoreIcon
-        style={{
-          transform: `rotate(${isOpen ? 180 : 0}deg)`,
-        }}
-      />
+      <li {...rest} className={classes} {...props} ref={ref}>
+        {icon && <span className="navmenu-sub-icon">{icon}</span>}
+        <span className="navmenu-sub-label">{label}</span>
+        {expandIcon && (
+          <span className="navmenu-sub-expand-icon">
+            {typeof expandIcon === 'function' ? expandIcon({ isOpen }) : expandIcon}
+          </span>
+        )}
+        <div className="navmenu-sub-container" {...containerProps}>
+          <ul className="navmenu-sub-list">{filterItems(children)}</ul>
+        </div>
+      </li>
     );
-  },
-};
+  }
+);
 
 NavMenu.Item = Item;
 NavMenu.Sub = Sub;

package/src/NavMenu/{style.js → style.ts}

@@ -1,6 +1,14 @@
 import { styled } from '../Theme';
 
-const NavMenuBase = styled('nav')`
+type NavMenuBaseProps = {
+  $bgColor: string;
+  $textColor: string;
+  $activeTextColor: string;
+};
+
+const NavMenuBase = styled('nav', {
+  shouldForwardProp: (prop) => prop !== '$bgColor' && prop !== '$textColor' && prop !== '$activeTextColor',
+})<NavMenuBaseProps>`
   background-color: ${(props) => props.$bgColor};
   font-size: 16px;
   // width: 100%;

package/src/Passport/passport.jsx

@@ -1,10 +1,10 @@
 import PropTypes from 'prop-types';
 import upperFirst from 'lodash/upperFirst';
 import { Box } from '@mui/material';
-import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import RevokeIcon from '@arcblock/icons/lib/RevokeIcon';
 
 import NFTDisplay from '../NFTDisplay';
+import { useLocaleContext } from '../Locale/context';
 
 export default function Passport({ passport, user, color, width, icon, children, createPassportSvg, ...rest }) {
   const { t } = useLocaleContext();

package/src/Screenshot/BaseScreenshot/index.jsx

@@ -1,8 +1,8 @@
-import { styled } from '@arcblock/ux/lib/Theme';
 import PropTypes from 'prop-types';
 
 import phone from './shells/Phone';
 import macbook from './shells/Macbook';
+import { styled } from '../../Theme';
 
 const map = {
   phone,

package/src/SplitButton/index.tsx

@@ -1,5 +1,4 @@
 import React, { useState, useRef, isValidElement } from 'react';
-import PropTypes from 'prop-types';
 import ExpandMore from '@mui/icons-material/ExpandMore';
 import Popper from '@mui/material/Popper';
 import Paper from '@mui/material/Paper';
@@ -23,7 +22,16 @@ export interface SplitButtonProps extends Omit<ButtonGroupProps, 'children'> {
 }
 
 export default function SplitButton(props: SplitButtonProps) {
-  const { size, color, menu, children, variant, onClick, menuButtonProps, ...rest } = props;
+  const {
+    size = 'medium',
+    color = 'primary',
+    menu = [],
+    children = null,
+    variant = 'contained',
+    onClick = noop,
+    menuButtonProps = {},
+    ...rest
+  } = props;
 
   const [open, setOpen] = useState(false);
   const anchorRef = useRef<HTMLDivElement | null>(null);
@@ -74,27 +82,6 @@ export default function SplitButton(props: SplitButtonProps) {
   );
 }
 
-SplitButton.propTypes = {
-  size: PropTypes.string,
-  color: PropTypes.string,
-  menu: PropTypes.oneOfType([PropTypes.node, PropTypes.array]),
-  // 也可以是用于渲染主按钮的 function
-  children: PropTypes.node,
-  variant: PropTypes.oneOf(['outlined', 'contained']),
-  onClick: PropTypes.func,
-  menuButtonProps: PropTypes.object,
-};
-
-SplitButton.defaultProps = {
-  size: 'medium',
-  color: 'primary',
-  menu: [],
-  children: null,
-  variant: 'contained',
-  onClick: noop,
-  menuButtonProps: {},
-};
-
 SplitButton.Item = MenuItem;
 
 const StyledButtonGroup = styled(ButtonGroup)`

package/src/Theme/{index.js → index.ts}

@@ -1,24 +1,18 @@
+/* eslint-disable no-unused-vars */
+import { CreateMUIStyled, Theme } from '@mui/material';
 import { styled as muiStyled, useTheme } from '@mui/material/styles';
 
 export * from './theme';
 export { default as ThemeProvider } from './theme-provider';
 export { useTheme };
 
-const isTransientProp = (prop) => prop.startsWith('$');
+const isTransientProp = (prop: string) => prop.startsWith('$');
 
-/**
- * @typedef {import('@mui/material/styles').Theme} Theme
- * @typedef {import('@mui/material/styles').CreateMUIStyled<Theme>} Styled
- */
-
-/**
- * @type {Styled}
- */
-export const styled = (component, options = {}) => {
+export const styled: CreateMUIStyled<Theme> = (component: any, options?: any) => {
   return muiStyled(component, {
     ...options,
-    shouldForwardProp: (prop) => {
-      if (options.shouldForwardProp) {
+    shouldForwardProp: (prop: string) => {
+      if (options?.shouldForwardProp) {
         return options.shouldForwardProp(prop) && !isTransientProp(prop);
       }
       return !isTransientProp(prop);

package/src/Theme/{theme-provider.jsx → theme-provider.tsx}

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import { ThemeProvider as MuiThemeProvider } from '@mui/material/styles';
+import { ThemeProvider as MuiThemeProvider, Theme } from '@mui/material/styles';
 import StyledEngineProvider from '@mui/material/StyledEngineProvider';
 import CssBaseline from '@mui/material/CssBaseline';
 import { createTheme } from './theme';
@@ -9,7 +9,15 @@ const defaultTheme = createTheme();
 /**
  * 默认的 theme provider, 可以为 webapp/blocklet 快捷的配置好 mui theme provider
  */
-export default function ThemeProvider({ children, theme, injectFirst }) {
+export default function ThemeProvider({
+  children,
+  theme,
+  injectFirst,
+}: {
+  children: React.ReactNode;
+  theme: Theme;
+  injectFirst: boolean;
+}) {
   return (
     // injectFirst 会影响 makeStyles 自定义样式和 mui styles 覆盖问题
     <StyledEngineProvider injectFirst={injectFirst}>

package/src/Theme/{theme.js → theme.ts}

@@ -1,5 +1,15 @@
+/* eslint-disable no-unused-vars */
+/* eslint-disable no-shadow */
 // https://app.zeplin.io/styleguide/5d1436f1e97c2156f49c0725/colors
-import { createTheme as _createTheme, responsiveFontSizes } from '@mui/material/styles';
+import {
+  createTheme as _createTheme,
+  Components,
+  PaletteOptions,
+  responsiveFontSizes,
+  type Theme,
+  type ThemeOptions,
+} from '@mui/material/styles';
+import { Typography, TypographyOptions } from '@mui/material/styles/createTypography';
 // 为了避免加载全量的字体导致打包后体积太大，目前只选择了 latin 语系的字体
 import '@fontsource/inter/latin-300.css';
 import '@fontsource/inter/latin-400.css';
@@ -9,35 +19,54 @@ import '@fontsource/inter/latin-ext-300.css';
 import '@fontsource/inter/latin-ext-400.css';
 import '@fontsource/inter/latin-ext-500.css';
 import '@fontsource/inter/latin-ext-700.css';
-
 import colors from '../Colors';
 
-/**
- * @typedef {import('@mui/material/styles').Theme} Theme
- * @typedef {import('@mui/material/styles').TypographyVariantsOptions} TypographyVariantsOptions
- * @typedef {import('@mui/material/styles').Components} Components
- */
+// 扩展 Theme 和 ThemeOptions 接口
+declare module '@mui/material/styles/createTheme' {
+  interface Theme {
+    mode?: string;
+    themeName?: string;
+    pageWidth?: string;
+    colors?: Record<string, string>;
+    typography: Typography & {
+      useNextVariants: boolean;
+      color: Record<string, string>;
+      button: {
+        fontWeight?: number;
+      };
+    };
+  }
+  interface ThemeOptions {
+    mode?: string;
+    themeName?: string;
+    pageWidth?: string;
+    colors?: Record<string, string>;
+  }
+}
 
 const muiDarkTheme = _createTheme({ palette: { mode: 'dark' } });
 
 // https://material-ui.com/customization/default-theme/
-/**
- * @description
- * @export
- * @param {{
- *  mode?: string,
- *  pageWidth?: string,
- *  palette?: import('@mui/material/styles').PaletteOptions,
- *  typography?: TypographyVariantsOptions,
- *  overrides?: Components<Omit<Theme, 'components'>>,
- * }} options
- * @return {Theme}
- */
-export const create = ({ mode = 'light', pageWidth = 'md', palette, typography, overrides = {}, ...rest } = {}) => {
+export const create = ({
+  mode = 'light',
+  pageWidth = 'md',
+  typography,
+  /** @deprecated 使用 components 替代 */
+  overrides,
+  // original theme options
+  palette,
+  components,
+  ...rest
+}: {
+  mode?: string;
+  pageWidth?: string;
+  typography?: TypographyOptions;
+  overrides?: Components<Omit<Theme, 'components'>>;
+} & ThemeOptions = {}) => {
   // palette 考虑 light & dark mode, dark mode 需要持续完善
   // - 能配合 ColorModeContext 使用
   // - 为 dark mode 系统的设计整个 palette, 不要单个 color 设置
-  const _palette =
+  const _palette: PaletteOptions =
     mode === 'light'
       ? Object.assign(
           {
@@ -141,10 +170,12 @@ export const create = ({ mode = 'light', pageWidth = 'md', palette, typography,
         },
       },
       ...overrides,
+      ...components,
     },
     pageWidth,
-    // TODO: 过时的 colors, 需要各项目负责人检查项目中是否使用 "theme.colors", 如果有需要清除,
-    //       可以从 Colors 模块/theme.palette/mui colors 中取值
+    /**
+     * @deprecated 应使用 theme.palette 中的颜色
+     */
     colors: {
       white: '#FFFFFF',
       dark: '#4A707C',