@arcblock/ux 2.10.66 → 2.10.68

package/src/Locale/{selector.jsx → selector.tsx}

@@ -1,6 +1,5 @@
 /* eslint-disable react/jsx-no-bind */
-import { useState, useContext, useRef, useMemo } from 'react';
-import PropTypes from 'prop-types';
+import React, { useState, useContext, useRef, useMemo } from 'react';
 import { Button, Typography, IconButton, Popper, MenuItem, MenuList, Box, ClickAwayListener } from '@mui/material';
 import { Icon as IconifyIcon } from '@iconify/react';
 import CheckIcon from '@iconify-icons/material-symbols/check';
@@ -11,16 +10,34 @@ import { getColor, getBackground } from '../Util';
 import { temp as colors } from '../Colors';
 import { LocaleContext } from './context';
 import { styled, useTheme } from '../Theme';
+import type { Locale } from '../type';
+
+export interface LocaleSelectorProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+  showText?: true | false;
+  popperProps?: React.HTMLAttributes<HTMLDivElement>;
+  popperType?: 'hover' | 'click';
+  icon?: React.ComponentType<any>;
+  size?: number;
+  onChange?: (locale: Locale) => void;
+}
 
-export default function LocaleSelector(props) {
-  const { showText, popperProps, popperType, icon: Icon, size, ...rest } = props;
+export default function LocaleSelector(props: LocaleSelectorProps) {
+  const {
+    showText = true,
+    popperProps = {},
+    popperType = 'click',
+    icon: Icon,
+    size = 24,
+    onChange = noop,
+    ...rest
+  } = props;
   const { locale, changeLocale, languages } = useContext(LocaleContext);
-  const anchorEl = useRef(null);
+  const anchorEl = useRef<HTMLButtonElement>(null);
   const [open, setOpen] = useState(false);
   const theme = useTheme();
   const dark = theme?.palette?.mode === 'dark';
 
-  const onSelect = (newLocale) => {
+  const onSelect = (newLocale: Locale) => {
     changeLocale(newLocale);
     setOpen(false);
     if (typeof props.onChange === 'function') {
@@ -28,14 +45,14 @@ export default function LocaleSelector(props) {
     }
   };
 
-  const onClose = (e) => {
-    if (anchorEl.current?.contains(e.target)) {
+  const onClose = (e: MouseEvent | TouchEvent) => {
+    if (anchorEl.current?.contains(e.target as Node)) {
       return;
     }
     setOpen(false);
   };
 
-  const ButtonComponent = showText ? Button : IconButton;
+  const ButtonComponent: typeof Button = showText ? Button : IconButton;
 
   const handleEventProps =
     popperType === 'hover'
@@ -62,14 +79,14 @@ export default function LocaleSelector(props) {
   }, [Icon, size]);
 
   return (
-    <Div component="div" dark={dark} theme={theme} {...rest} {...handleEventProps}>
+    <Div dark={dark} theme={theme} {...rest} {...handleEventProps}>
       <ButtonComponent ref={anchorEl} className="trigger" role="button" aria-label="Locale selector button">
         <Box display="flex" alignItems="center">
           {renderIcon}
 
           {showText ? (
             <Typography component="strong" className="trigger-text">
-              {languages.find((x) => x.code === locale).name}
+              {languages.find((x) => x.code === locale)?.name}
             </Typography>
           ) : (
             ''
@@ -82,7 +99,7 @@ export default function LocaleSelector(props) {
           <ClickAwayListener onClickAway={onClose}>
             <MenuList>
               {languages.map(({ code, name }) => (
-                <MenuItem key={code} className="locale-item" onClick={() => onSelect(code, name)}>
+                <MenuItem key={code} className="locale-item" onClick={() => onSelect(code)}>
                   <IconifyIcon
                     icon={CheckIcon}
                     className={code === locale ? 'check-icon check-icon-visible' : 'check-icon'}
@@ -98,27 +115,13 @@ export default function LocaleSelector(props) {
   );
 }
 
-LocaleSelector.propTypes = {
-  size: PropTypes.number,
-  showText: PropTypes.bool,
-  popperProps: PropTypes.object,
-  onChange: PropTypes.func,
-  popperType: PropTypes.oneOf(['hover', 'click']),
-  icon: PropTypes.any,
-};
-
-LocaleSelector.defaultProps = {
-  showText: true,
-  size: 24,
-  popperProps: {},
-  onChange: noop,
-  popperType: 'click',
-  icon: null,
+type DivProps = React.HTMLAttributes<HTMLDivElement> & {
+  dark: boolean;
 };
 
 const Div = styled('div', {
   shouldForwardProp: (prop) => prop !== 'dark',
-})`
+})<DivProps>`
   display: inline-block;
 
   .trigger {

package/src/Locale/{util.js → util.ts}

@@ -1,10 +1,17 @@
 import get from 'lodash/get';
+import type { Locale, Translations } from '../type';
 
 /* eslint-disable no-prototype-builtins */
-export const replace = (template, data) =>
+export const replace = (template: string, data: Record<string, any>) =>
   template.replace(/{(\w*)}/g, (m, key) => (data.hasOwnProperty(key) ? data[key] : ''));
 
-export const translate = (translations, key, locale, fallbackLocale = 'en', data = {}) => {
+export const translate = (
+  translations: Translations,
+  key: string,
+  locale: Locale,
+  fallbackLocale = 'en',
+  data = {}
+) => {
   const translation = translations[locale];
   const translationValue = get(translation, key);
   const fallbackValue = get(translations[fallbackLocale], key);

package/src/Logo/index.tsx

@@ -0,0 +1,58 @@
+import { type SxProps } from '@mui/material';
+import { styled } from '../Theme';
+
+import { ReactComponent as LightLogo } from './images/logo-light-top.svg';
+import { ReactComponent as LightText } from './images/logo-light-text.svg';
+import { ReactComponent as DarkLogo } from './images/logo-dark-top.svg';
+import { ReactComponent as DarkText } from './images/logo-dark-text.svg';
+
+export interface LogoProps extends React.HTMLAttributes<HTMLSpanElement> {
+  mode?: 'light' | 'dark';
+  layout?: 'vertical' | 'horizontal';
+  showText?: true | false;
+  showLogo?: true | false;
+  size?: number;
+  sx?: SxProps;
+}
+
+export default function Logo({
+  showText = true,
+  showLogo = true,
+  mode = 'dark',
+  layout = 'vertical',
+  size,
+  style = {},
+  ...rest
+}: LogoProps) {
+  const isLight = mode === 'light';
+  const logo = isLight ? <LightLogo /> : <DarkLogo />;
+  const text = isLight ? <LightText className="logo-text" /> : <DarkText className="logo-text" />;
+
+  if (size) {
+    style.width = `${size}px`;
+    style.height = `${size}px`;
+  }
+
+  return (
+    <Container layout={layout} style={style} {...rest}>
+      {showLogo && logo}
+      {showText && text}
+    </Container>
+  );
+}
+
+type ContainerProps = {
+  layout: 'vertical' | 'horizontal';
+};
+
+const Container = styled('span')<ContainerProps>`
+  display: inline-flex;
+  flex-direction: ${(props) => (props.layout === 'horizontal' ? 'row' : 'column')};
+  justify-content: center;
+  align-items: center;
+
+  .logo-text {
+    ${(props) => (props.layout === 'vertical' ? 'margin-top: 8px;' : '')}
+    ${(props) => (props.layout === 'vertical' ? '' : 'margin-left: 8px;')};
+  }
+`;

package/src/Metric/{index.jsx → index.tsx}

@@ -1,10 +1,28 @@
 /* eslint-disable react/no-danger */
-import PropTypes from 'prop-types';
+import { Link } from '@mui/material';
 
 import ImageIcon from '../Icon/image';
 import { styled } from '../Theme';
 
-export default function Metric({ icon, value, name, url, animated, LinkComponent, prefix }) {
+export interface MetricProps {
+  icon: string;
+  value: string | number;
+  name: React.ReactNode;
+  url?: string;
+  animated?: false | true;
+  LinkComponent?: React.ElementType;
+  prefix?: string;
+}
+
+export default function Metric({
+  icon,
+  value,
+  name,
+  url = '',
+  animated = false,
+  LinkComponent = Link,
+  prefix = '/images',
+}: MetricProps) {
   const metric = (
     <>
       <div className="metric__image">
@@ -23,24 +41,11 @@ export default function Metric({ icon, value, name, url, animated, LinkComponent
   return <Container>{url ? <LinkComponent to={url}>{metric}</LinkComponent> : metric}</Container>;
 }
 
-Metric.propTypes = {
-  icon: PropTypes.string.isRequired,
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
-  name: PropTypes.node.isRequired,
-  animated: PropTypes.bool,
-  url: PropTypes.string,
-  LinkComponent: PropTypes.any,
-  prefix: PropTypes.string,
-};
-
-Metric.defaultProps = {
-  animated: false,
-  url: '',
-  LinkComponent: null,
-  prefix: '/images',
+type ContainerProps = {
+  size?: 'small' | 'large';
 };
 
-const Container = styled('div')`
+const Container = styled('div')<ContainerProps>`
   border-left: 1px solid ${(props) => props.theme.typography.color.main};
   padding: 10px 0 10px 16px;
   @media (max-width: ${(props) => props.theme.breakpoints.values.sm}px) {

package/src/NFTDisplay/{aspect-ratio-container.jsx → aspect-ratio-container.tsx}

@@ -1,8 +1,11 @@
-import PropTypes from 'prop-types';
-
 import { styled } from '../Theme';
 
-function AspectRatioContainer({ aspect, children, ...rest }) {
+export interface AspectRatioContainerProps {
+  aspect: number;
+  children?: React.ReactNode;
+}
+
+function AspectRatioContainer({ aspect, children, ...rest }: AspectRatioContainerProps) {
   return (
     <Root aspect={aspect} {...rest}>
       <span className="aspect-ratio-container__inner">{children}</span>
@@ -10,12 +13,11 @@ function AspectRatioContainer({ aspect, children, ...rest }) {
   );
 }
 
-AspectRatioContainer.propTypes = {
-  aspect: PropTypes.number.isRequired,
-  children: PropTypes.node.isRequired,
+type RootProps = {
+  aspect: number;
 };
 
-const Root = styled('span')`
+const Root = styled('span')<RootProps>`
   display: block;
   position: relative;
   width: 100%;

package/src/NFTDisplay/{broken.jsx → broken.tsx}

@@ -1,10 +1,13 @@
 import Box from '@mui/material/Box';
-import PropTypes from 'prop-types';
-// eslint-disable-next-line import/no-unresolved
-import NFTBroken from './NFTBroken.svg?react';
 import { styled } from '../Theme';
 
-export default function Broken({ children } = {}) {
+import { ReactComponent as NFTBroken } from './NFTBroken.svg';
+
+export interface BrokenProps {
+  children?: React.ReactNode;
+}
+
+export default function Broken({ children = 'Non-publicly accessible NFT' }: BrokenProps = {}) {
   return (
     <Root>
       <NFTBroken className="nft-display-broken-background" />
@@ -13,14 +16,6 @@ export default function Broken({ children } = {}) {
   );
 }
 
-Broken.propTypes = {
-  children: PropTypes.node,
-};
-
-Broken.defaultProps = {
-  children: 'Non-publicly accessible NFT',
-};
-
 const Root = styled(Box)`
   width: 100%;
   height: 100%;

package/src/NFTDisplay/{displayApi.js → displayApi.ts}

@@ -1,10 +1,10 @@
-import axios from 'axios';
+import axios, { AxiosAdapter, type AxiosResponse } from 'axios';
 import adapter from 'axios/lib/adapters/xhr.js';
 
 const cache = new Map();
 const EXPIRATION_TIME_MS = 10 * 60 * 1000; // 10 minutes
 
-const cacheAdapterEnhancer = (config) => {
+const cacheAdapterEnhancer: AxiosAdapter = (config) => {
   const { url, method } = config;
   const cacheKey = JSON.stringify({ url, method });
 
@@ -22,12 +22,12 @@ const cacheAdapterEnhancer = (config) => {
   }
 
   return adapter(config)
-    .then((response) => {
+    .then((response: AxiosResponse) => {
       // cache headers
       cache.set(cacheKey, { headers: response.headers, timestamp: Date.now() });
       return response;
     })
-    .catch((error) => {
+    .catch((error: unknown) => {
       // cache error
       cache.set(cacheKey, { error, timestamp: Date.now() });
       throw error;

package/src/NFTDisplay/{index.jsx → index.tsx}

@@ -1,6 +1,5 @@
 /* eslint-disable react-hooks/rules-of-hooks */
-import { useRef, useEffect, useState } from 'react';
-import PropTypes from 'prop-types';
+import React, { useRef, useEffect, useState } from 'react';
 import clsx from 'clsx';
 import { Buffer } from 'buffer';
 import get from 'lodash/get';
@@ -8,6 +7,7 @@ import pako from 'pako';
 import base64 from 'base64-url';
 import isSvg from 'is-svg';
 import noop from 'lodash/noop';
+import { Box, type BoxProps } from '@mui/material';
 
 import AspectRatioContainer from './aspect-ratio-container';
 import ImgSvgEmbedder from './svg-embedder/img';
@@ -22,11 +22,11 @@ import displayApi from './displayApi';
  * - 旧: assetState.data.value (.credentialSubject.display)
  * - 新: assetState.display
  */
-export function getNFTData(assetState) {
+export function getNFTData(assetState: Record<string, any>) {
   return assetState?.display || assetState?.data?.value;
 }
 
-function fromBase64(v) {
+function fromBase64(v: string) {
   if (typeof v !== 'string') {
     throw new Error('fromBase64 requires input to be a string');
   }
@@ -38,7 +38,7 @@ function fromBase64(v) {
 // };
 
 // 仅针对非 url type 的情况
-const getSvgEmbedder = (preferredSvgEmbedder) => {
+const getSvgEmbedder = (preferredSvgEmbedder: 'img' | 'svg') => {
   const embedders = {
     img: ImgSvgEmbedder,
     svg: InlineSvgEmbedder,
@@ -46,6 +46,31 @@ const getSvgEmbedder = (preferredSvgEmbedder) => {
   return embedders[preferredSvgEmbedder];
 };
 
+export interface NFTDisplayProps extends BoxProps {
+  /** asset data 可以是 raw data 和 parsed data */
+  data: string | Record<string, any>;
+  address: string;
+  inset?: false | true;
+  aspect?: number;
+  component?: React.ElementType<any>;
+  className?: string;
+  renderError?: () => React.ReactNode;
+  renderLoading?: () => React.ReactNode;
+  /** 对于非 url type 的情况, 支持优先选用的 svg 嵌入方式, 默认是 img */
+  preferredSvgEmbedder?: 'img' | 'svg';
+  /** 针对非 url type 的情况, 检测 svg 有效性, 默认禁用 */
+  checkSvg?: false | true;
+  /** loading 最小显示时间 (避免闪烁) */
+  minimumLoadingTime?: number;
+  /** 完成回调, 无论加载成功|失败 */
+  onCompleted?: () => void;
+  /**
+   * 图片处理，参考：https://team.arcblock.io/comment/docs/c158aee4-accd-42f4-9ced-6a23f28c00e0/en/blocklet-image-service-guide
+   * 配置参数会全部转发给 Image Service
+   */
+  imageFilter?: object | null;
+}
+
 /**
  * TODO:
  * 考虑把 asset data 解析部分和 nft display 分离, android 端有相关使用场景 - 只传入 svg 或 url, 也可以传入 asset data,
@@ -56,30 +81,31 @@ function NFTDisplay({
   address,
   inset,
   aspect,
-  component,
-  className,
+  component = 'span',
+  className = '',
   renderError,
   renderLoading,
-  preferredSvgEmbedder,
-  checkSvg,
-  minimumLoadingTime,
-  onCompleted,
-  imageFilter,
+  preferredSvgEmbedder = 'img',
+  checkSvg = false,
+  minimumLoadingTime = 0,
+  onCompleted = noop,
+  imageFilter = null,
   ...rest
-}) {
-  const wrapRoot = (children) => (
-    <Root as={component} {...rest} className={clsx(className, { 'nft-display--inset': inset })}>
+}: NFTDisplayProps) {
+  const wrapRoot = (children: React.ReactNode) => (
+    <Root component={component} {...rest} className={clsx(className, { 'nft-display--inset': inset })}>
       {children}
     </Root>
   );
 
-  const parsed = useRef(data);
+  const parsed = useRef<Record<string, any>>({});
 
   try {
     // 如果是 raw data 先解析
-    if (typeof parsed.current === 'string') {
+    if (typeof data === 'string') {
       parsed.current = JSON.parse(data);
-      // console.log('[debug] parse data')
+    } else {
+      parsed.current = data;
     }
 
     const { vcId } = parsed.current;
@@ -91,7 +117,12 @@ function NFTDisplay({
     const isUrlType = type === 'url';
 
     // 首次加载, 对于 url type 的情况, loading 为 true
-    const [state, setState] = useState({
+    const [state, setState] = useState<{
+      loading: boolean;
+      error: boolean;
+      loadingUrlType: boolean;
+      urlType: string | null;
+    }>({
       loading: isUrlType,
       error: false,
       loadingUrlType: true,
@@ -101,7 +132,7 @@ function NFTDisplay({
     // console.log('[debug] render', {type, minimumLoadingTime}, JSON.stringify(state))
 
     // assemble the complete url
-    const getFullContentUrl = ({ useImageFilter = false, t } = {}) => {
+    const getFullContentUrl = ({ useImageFilter = false, t }: { useImageFilter?: boolean; t?: string } = {}) => {
       const urlObj = new URL(content);
 
       // check protocol
@@ -139,12 +170,13 @@ function NFTDisplay({
           url: getFullContentUrl({ useImageFilter: false, t: 'nftdisplay' }),
           method: 'HEAD',
         });
+        // @ts-expect-error
         const contentType = response?.headers?.get('Content-Type');
         setState({ ...state, loadingUrlType: false, urlType: contentType });
       } catch (error) {
         console.error('Failed to fetch url content type', error);
         // display an error message when timeout occurs to avoid repeated waiting.
-        if (error?.message?.includes('timeout')) {
+        if ((error as Error)?.message?.includes('timeout')) {
           setState({ ...state, loadingUrlType: false, loading: false, error: true });
           return;
         }
@@ -154,7 +186,7 @@ function NFTDisplay({
     };
 
     useEffect(() => {
-      let timer;
+      let timer: NodeJS.Timeout;
       if (minimumLoadingTime > 0) {
         timer = setTimeout(() => setMinimumLoadingReady(true), minimumLoadingTime);
       }
@@ -295,7 +327,7 @@ function NFTDisplay({
       </>
     );
   } catch (e) {
-    console.error(e?.message, {
+    console.error((e as Error)?.message, {
       nftId: address,
       vcId: parsed?.current?.vcId,
     });
@@ -303,44 +335,7 @@ function NFTDisplay({
   }
 }
 
-NFTDisplay.propTypes = {
-  // asset data 可以是 raw data 和 parsed data
-  data: PropTypes.oneOfType([PropTypes.object, PropTypes.string]).isRequired,
-  address: PropTypes.string.isRequired,
-  component: PropTypes.string,
-  inset: PropTypes.bool,
-  aspect: PropTypes.number,
-  className: PropTypes.string,
-  renderError: PropTypes.func,
-  renderLoading: PropTypes.func,
-  // 对于非 url type 的情况, 支持优先选用的 svg 嵌入方式, 默认是 img
-  preferredSvgEmbedder: PropTypes.oneOf(['img', 'svg']),
-  // 针对非 url type 的情况, 检测 svg 有效性, 默认禁用
-  checkSvg: PropTypes.bool,
-  // loading 最小显示时间 (避免闪烁)
-  minimumLoadingTime: PropTypes.number,
-  // 完成回调, 无论加载成功|失败
-  onCompleted: PropTypes.func,
-  // 图片处理，参考：https://team.arcblock.io/comment/docs/c158aee4-accd-42f4-9ced-6a23f28c00e0/en/blocklet-image-service-guide
-  // 配置参数会全部转发给 Image Service
-  imageFilter: PropTypes.object,
-};
-
-NFTDisplay.defaultProps = {
-  component: 'span',
-  inset: false,
-  aspect: 0,
-  className: '',
-  renderError: null,
-  renderLoading: null,
-  preferredSvgEmbedder: 'img',
-  checkSvg: false,
-  minimumLoadingTime: 0,
-  onCompleted: noop,
-  imageFilter: null,
-};
-
-const Root = styled('div')`
+const Root = styled(Box)`
   display: flex;
   justify-content: center;
   align-items: center;
@@ -369,11 +364,11 @@ const Root = styled('div')`
   }
 `;
 
-function withAspectRatio(Component) {
+function withAspectRatio(Component: React.ComponentType<NFTDisplayProps>) {
   // eslint-disable-next-line func-names, react/prop-types
-  return function ({ aspect, inset, ...rest }) {
+  return function ({ aspect, inset, ...rest }: NFTDisplayProps) {
     // inset 比 aspect ratio 优先级高, 如果同时设置了 inset 和 aspect, 则后者不生效
-    const applyAspectRatio = aspect > 0 && !inset;
+    const applyAspectRatio = aspect && aspect > 0 && !inset;
     if (applyAspectRatio) {
       return (
         <AspectRatioContainer aspect={aspect}>

package/src/NFTDisplay/svg-embedder/{img.jsx → img.tsx}

@@ -1,16 +1,20 @@
-import PropTypes from 'prop-types';
 import InlineSvgEmbedder from './inline-svg';
 
-const svgToImgUrl = (svg) => {
+const svgToImgUrl = (svg: string) => {
   // fix: #225, https://stackoverflow.com/a/52135328)
   const blob = new Blob([svg], { type: 'image/svg+xml' });
   return URL.createObjectURL(blob);
 };
 
-/**
- * 基于 <img> 嵌入 svg
- */
-function ImgEmbedder({ svg, alt, fallback, ...rest }) {
+export interface ImgEmbedderProps extends React.HTMLAttributes<HTMLImageElement> {
+  svg: string;
+  alt?: string;
+  /** 对于包含 foreignObject 的 svg, fallback 到 inline svg + shadow DOM */
+  fallback?: true | false;
+}
+
+/** 基于 <img> 嵌入 svg */
+function ImgEmbedder({ svg, alt = '', fallback = true, ...rest }: ImgEmbedderProps) {
   // 包含 foreignObject 的 svg, fallback 到 shadow dom
   if (fallback && svg.indexOf('</foreignObject>') > -1) {
     return <InlineSvgEmbedder svg={svg} />;
@@ -20,16 +24,4 @@ function ImgEmbedder({ svg, alt, fallback, ...rest }) {
   return <img src={url} onLoad={() => URL.revokeObjectURL(url)} alt={alt} {...rest} />;
 }
 
-ImgEmbedder.propTypes = {
-  svg: PropTypes.string.isRequired,
-  alt: PropTypes.string,
-  // 对于包含 foreignObject 的 svg, fallback 到 inline svg + shadow DOM
-  fallback: PropTypes.bool,
-};
-
-ImgEmbedder.defaultProps = {
-  alt: '',
-  fallback: true,
-};
-
 export default ImgEmbedder;

package/src/NFTDisplay/svg-embedder/{inline-svg.jsx → inline-svg.tsx}

@@ -1,12 +1,15 @@
-import PropTypes from 'prop-types';
 import root from 'react-shadow/emotion';
+import { type SxProps } from '@mui/material';
 
 import { styled } from '../../Theme';
 
-/**
- * inline svg 的方式嵌入 svg, 使用 shadow DOM 避免样式污染
- */
-function InlineSvg({ svg, ...rest }) {
+export interface InlineSvgProps extends React.HTMLAttributes<HTMLSpanElement> {
+  svg: string;
+  sx?: SxProps;
+}
+
+/** inline svg 的方式嵌入 svg, 使用 shadow DOM 避免样式污染 */
+function InlineSvg({ svg, ...rest }: InlineSvgProps) {
   return (
     <Root {...rest}>
       <Inner dangerouslySetInnerHTML={{ __html: svg }} />
@@ -14,10 +17,6 @@ function InlineSvg({ svg, ...rest }) {
   );
 }
 
-InlineSvg.propTypes = {
-  svg: PropTypes.string.isRequired,
-};
-
 const Root = styled(root.span)`
   display: block;
   width: 100%;

package/src/NavMenu/nav-menu.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable no-unused-vars */
 import {
   Children,
   cloneElement,
@@ -10,6 +9,7 @@ import {
   useLayoutEffect,
   isValidElement,
 } from 'react';
+import { type SxProps } from '@mui/material';
 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';
@@ -60,8 +60,8 @@ export interface NavMenuProps extends React.HTMLAttributes<HTMLElement> {
   textColor?: string;
   activeTextColor?: string;
   bgColor?: string;
-  // eslint-disable-next-line no-unused-vars
   onSelected?: (id: string) => void;
+  sx?: SxProps;
 }
 
 /**
@@ -305,7 +305,6 @@ export interface SubProps extends React.HTMLAttributes<HTMLLIElement> {
   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);
 }