@arcblock/ux 3.0.5 → 3.0.7

package/src/Layout/dashboard-legacy/sidebar.tsx

@@ -19,13 +19,20 @@ export type LinkItem = {
 export interface SidebarProps extends React.HTMLAttributes<HTMLDivElement> {
   images: Record<string, string>;
   links: LinkItem[];
-  prefix: string;
+  prefix?: string;
   addons?: React.ReactNode;
   logo?: React.ReactNode;
   sx?: SxProps;
 }
 
-export default function Sidebar({ images, links, prefix = '/images', addons, logo, ...rest }: SidebarProps) {
+export default function Sidebar({
+  images,
+  links,
+  prefix = '/images',
+  addons = undefined,
+  logo = undefined,
+  ...rest
+}: SidebarProps) {
   const theme = useTheme();
   const location = useLocation();
   const isSelected = (_: string, name: string) => {
@@ -45,6 +52,7 @@ export default function Sidebar({ images, links, prefix = '/images', addons, log
             <ImageIcon
               name={images[name]}
               size={36}
+              // @ts-expect-error
               color={selected ? '#00c2c4' : theme.typography.color.main}
               prefix={prefix}
               showBadge={showBadge}

package/src/Layout/index.tsx

@@ -42,11 +42,11 @@ export interface LayoutProps extends React.HTMLAttributes<HTMLDivElement> {
 export default function Layout({
   title,
   brand,
-  description,
+  description = undefined,
   links = [],
   logo = <Logo showText={false} style={{ width: '40px', height: '40px' }} />,
   showLogo = false,
-  addons,
+  addons = undefined,
   footer = (
     <Container>
       <Footer />

package/src/LoadingMask/index.tsx

@@ -6,15 +6,15 @@ export interface LoadingMaskProps {
   borderWidth?: number;
   borderRadius?: number;
   duration?: number;
-  children?: React.ReactNode;
+  children: React.ReactNode;
 }
 
 export default function LoadingMask({
   size = 64,
-  padding,
-  borderWidth,
-  borderRadius,
-  duration,
+  padding = undefined,
+  borderWidth = undefined,
+  borderRadius = undefined,
+  duration = undefined,
   children,
 }: LoadingMaskProps) {
   const finialSize = size;

package/src/Locale/context.tsx

@@ -94,10 +94,10 @@ const { Provider, Consumer } = LocaleContext;
 
 function LocaleProvider({
   children,
-  locale,
-  fallbackLocale,
+  locale = undefined,
+  fallbackLocale = undefined,
   translations,
-  onLoadingTranslation,
+  onLoadingTranslation = undefined,
   languages = [],
   ...rest
 }: LocaleProviderProps) {

package/src/Locale/selector.tsx

@@ -29,7 +29,7 @@ export interface LocaleSelectorProps extends Omit<React.HTMLAttributes<HTMLDivEl
   onChange?: (locale: Locale) => void;
 }
 
-export default function LocaleSelector(props: LocaleSelectorProps) {
+export default function LocaleSelector({ ...props }: LocaleSelectorProps) {
   const { showText = true, popperProps = {}, popperType = 'click', icon: Icon, size = 24, ...rest } = props;
   const { locale, changeLocale, languages } = use(LocaleContext);
   const anchorEl = useRef<HTMLButtonElement>(null);

package/src/Logo/index.tsx

@@ -20,7 +20,7 @@ export default function Logo({
   showLogo = true,
   mode = 'dark',
   layout = 'vertical',
-  size,
+  size = undefined,
   style = {},
   ...rest
 }: LogoProps) {

package/src/NFTDisplay/aspect-ratio-container.tsx

@@ -2,7 +2,7 @@ import { styled } from '../Theme';
 
 export interface AspectRatioContainerProps {
   aspect: number;
-  children?: React.ReactNode;
+  children: React.ReactNode;
 }
 
 function AspectRatioContainer({ aspect, children, ...rest }: AspectRatioContainerProps) {

package/src/NFTDisplay/index.tsx

@@ -94,6 +94,7 @@ function NFTDisplay({
   ...rest
 }: NFTDisplayProps) {
   const wrapRoot = (children: React.ReactNode) => (
+    // @ts-expect-error
     <Root component={component} {...rest} className={clsx(className, { 'nft-display--inset': inset })}>
       {children}
     </Root>
@@ -375,7 +376,7 @@ const Root = styled(Box)`
 
 function withAspectRatio(Component: React.ComponentType<NFTDisplayProps>) {
   // eslint-disable-next-line func-names, react/prop-types
-  return function ({ aspect, inset, ...rest }: NFTDisplayProps) {
+  return function ({ aspect = undefined, inset = false, ...rest }: NFTDisplayProps) {
     // inset 比 aspect ratio 优先级高, 如果同时设置了 inset 和 aspect, 则后者不生效
     const applyAspectRatio = aspect && aspect > 0 && !inset;
     if (applyAspectRatio) {

package/src/NFTDisplay/render-svg.tsx

@@ -4,7 +4,7 @@ import axios from 'axios';
 import { useState } from 'react';
 import InlineSvg from './svg-embedder/inline-svg';
 
-function RenderSvg({ src, onLoad }: { src: string; onLoad?: () => void }) {
+function RenderSvg({ src, onLoad = undefined }: { src: string; onLoad?: () => void }) {
   const [svgContent, setSvgContent] = useState('');
 
   useAsyncEffect(async () => {

package/src/NavMenu/nav-menu.tsx

@@ -63,10 +63,13 @@ function NavMenu({
   mode = 'horizontal',
   children: _childs = null,
   activeId = null,
+  // eslint-disable-next-line react/require-default-props
   textColor,
+  // eslint-disable-next-line react/require-default-props
   activeTextColor,
+  // eslint-disable-next-line react/require-default-props
   bgColor,
-  onSelected,
+  onSelected = undefined,
   ...rest
 }: NavMenuProps) {
   const theme = useTheme();
@@ -294,11 +297,11 @@ export interface ItemProps extends React.HTMLAttributes<HTMLLIElement> {
 }
 
 export function Item({
-  ref,
+  ref = undefined,
   id: _id = '',
   icon = null,
   label = '',
-  description,
+  description = undefined,
   active = false,
   variant = 'default',
   onClick = noop,
@@ -353,13 +356,13 @@ export interface SubProps extends Omit<ItemProps, 'children' | 'active'> {
 }
 
 export function Sub({
-  ref,
+  ref = undefined,
   id: _id = '',
   icon = null,
   label = null,
   description,
   variant = 'default',
-  children,
+  children = undefined,
 
   expandIcon = ({ isOpen }) => (
     <ExpandMoreIcon

package/src/NavMenu/products.tsx

@@ -201,7 +201,9 @@ export interface ProductsProps extends BoxProps {
   isOpen?: boolean;
 }
 
-export default function Products({ className, isOpen, ...rest }: ProductsProps) {
+// FIXME: @lixl39505 isOpen 没有用，是否要移除？
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export default function Products({ className, isOpen = undefined, ...rest }: ProductsProps) {
   const { mode } = useNavMenuContext();
   const { palette } = useTheme();
   const wrapperRef = useRef<HTMLDivElement>(null);

package/src/PageScroller/index.tsx

@@ -49,12 +49,12 @@ function PageScroller({
   animationTimer = DEFAULT_ANIMATION_TIMER,
   blockScrollDown = false,
   blockScrollUp = false,
-  children: _children,
+  children: _children = undefined,
   height = DEFAULT_CONTAINER_HEIGHT,
   width = DEFAULT_CONTAINER_WIDTH,
-  customPageNumber,
-  onScrollUnavailable,
-  onChange,
+  customPageNumber = undefined,
+  onScrollUnavailable = undefined,
+  onChange = undefined,
   renderAllPagesOnFirstRender = false,
   transitionTimingFunction = DEFAULT_ANIMATION,
 }: PageScrollerProps) {

package/src/PhoneInput/country-select.tsx

@@ -27,11 +27,11 @@ type CountrySelectComponent = <T extends keyof ParsedCountry = 'iso2'>(
 
 // 实现组件
 function CountrySelectInner<T extends keyof ParsedCountry = 'iso2'>({
-  ref,
+  ref = undefined,
   value,
-  onChange,
+  onChange = undefined,
   sx = {},
-  selectCountryProps,
+  selectCountryProps = undefined,
   preview = false,
   valueField = 'iso2' as T,
   ...rest

package/src/PhoneInput/index.tsx

@@ -125,7 +125,7 @@ export function detectCountryFromPhone(phoneNumber?: string): CountryIso2 | unde
 
 export default function PhoneInput({
   value = { country: 'us', phone: '' },
-  onChange,
+  onChange = undefined,
   placeholder = 'Enter phone number',
   countryDisplayOptions = {},
   preview = false,

package/src/PoweredByArcBlock/index.tsx

@@ -6,7 +6,11 @@ export interface PoweredByArcBlockProps extends TypographyProps {
   showExtra?: boolean;
 }
 
-export default function PoweredByArcBlock({ linkProps, showExtra, ...props }: PoweredByArcBlockProps) {
+export default function PoweredByArcBlock({
+  linkProps = undefined,
+  showExtra = false,
+  ...props
+}: PoweredByArcBlockProps) {
   return (
     <Typography {...props}>
       Powered by{' '}

package/src/QRCode/index.tsx

@@ -28,7 +28,7 @@ export interface QRCodeProps {
 
 // 该组件用于生成与 android wallet 样式风格相似的 qrcode
 // 注意: 依赖的 @solana/qr-code-styling 是一份 fork 版本, 原版本的 margin 配置存在 bug
-function QRCode({ data, size, image, config = {}, ...rest }: QRCodeProps) {
+function QRCode({ data, size, image = undefined, config = {}, ...rest }: QRCodeProps) {
   const ref = useRef(null);
   const options = useMemo(() => {
     return {

package/src/RelativeTime/index.tsx

@@ -167,7 +167,7 @@ function useRelativeTime({
 
 function UTCChip({
   locale,
-  isUtc,
+  isUtc = false,
   setIsUtc,
   useShortTimezone = true,
 }: {
@@ -213,8 +213,8 @@ export default function RelativeTime({
   from = '',
   to = '',
   type = 'relative',
-  tz,
-  relativeRange,
+  tz = undefined,
+  relativeRange = undefined,
   enableTooltip = true,
   useShortTimezone = false,
   disableTimezone = false,

package/src/Result/result.tsx

@@ -9,7 +9,7 @@ export interface ResultProps {
   extra?: React.ReactNode;
 }
 
-function Result({ icon, title = '', description = '', extra, ...rest }: ResultProps) {
+function Result({ icon = null, title = '', description = '', extra = null, ...rest }: ResultProps) {
   return (
     <Root {...rest}>
       {icon}

package/src/Screenshot/index.tsx

@@ -126,7 +126,7 @@ const findChildren = (
 };
 
 export interface OldScreenshotProps extends React.ComponentProps<'div'> {
-  type?: keyof typeof types;
+  type: keyof typeof types;
   className?: string;
   style?: React.CSSProperties;
   width?: number;
@@ -222,7 +222,7 @@ export interface ScreenFixerProps extends OldScreenshotProps {}
  * @param {*} props params to OldScreenshot
  * @returns <OldScreenshot />
  */
-function ScreenFixer(props: ScreenFixerProps) {
+function ScreenFixer({ ...props }: ScreenFixerProps) {
   const screenEl = useRef<HTMLDivElement>(null);
   const [height, setHeight] = useState<number>();
   const [scale, setScale] = useState<number | null>(null);

package/src/SessionUser/components/did-space.tsx

@@ -13,7 +13,7 @@ import Typography from '../../Typography';
 
 export interface DidSpaceProps extends BoxProps {
   session: Session;
-  locale: Locale;
+  locale?: Locale;
 }
 
 export default function DidSpace({ session, locale = 'en', ...rest }: DidSpaceProps) {

package/src/SessionUser/components/session-user-item.tsx

@@ -15,7 +15,7 @@ export interface SessionUserItemProps extends BoxProps {
 }
 
 function SessionUserItem({
-  ref,
+  ref = undefined,
   sessionItem,
   statusContent = null,
   active = false,

package/src/SharedBridge/index.tsx

@@ -9,11 +9,11 @@ import { mergeSx } from '../Util/style';
 import { callIframe, getCallbackAction } from '../Util/iframe';
 
 function SharedBridge({
-  ref,
+  ref = undefined,
   src,
   onClick,
   onLoad = noop,
-  sx,
+  sx = {},
   ...rest
 }: {
   src: string;

package/src/Spinner/index.tsx

@@ -7,7 +7,7 @@ export interface SpinnerProps extends Omit<CircularProgressProps, 'size'> {
 }
 
 /** 之前的 Spinner 实现由内外 2 个环构成, 现在改为基于 @mui/material/CircularProgress 的实现 */
-function Spinner(props: SpinnerProps) {
+function Spinner({ ...props }: SpinnerProps) {
   const _props = { ...props } as CircularProgressProps;
 
   // 兼容之前的 size prop (设置外圈/内圈的尺寸)

package/src/SplitButton/index.tsx

@@ -26,7 +26,7 @@ export interface SplitButtonProps extends Omit<ButtonGroupProps, 'children'> {
   menuButtonProps?: ButtonProps;
 }
 
-export default function SplitButton(props: SplitButtonProps) {
+export default function SplitButton({ ...props }: SplitButtonProps) {
   const {
     size = 'medium',
     color = 'primary',

package/src/Success/index.tsx

@@ -7,7 +7,7 @@ export interface SuccessProps {
 }
 
 // FIXME: @zhanghan 目前无法适配各种 size，后续优化
-export default function Success({ size = 64, backgroundColor, borderWidth = 4 }: SuccessProps) {
+export default function Success({ size = 64, backgroundColor = undefined, borderWidth = 4 }: SuccessProps) {
   const { palette } = useTheme();
   const contentSize = size - borderWidth * 2;
   const _backgroundColor = backgroundColor || palette.background.default;

package/src/Tabs/index.tsx

@@ -27,7 +27,7 @@ interface CardTabsProps extends Omit<MuiTabsProps, 'onChange'> {
   iconPosition?: TabProps['iconPosition'];
 }
 
-function CardTabs({ tabs, current, onChange, iconPosition, ...rest }: CardTabsProps) {
+function CardTabs({ tabs, current, onChange, iconPosition = undefined, ...rest }: CardTabsProps) {
   return (
     <MuiTabs
       scrollButtons="auto"
@@ -97,7 +97,7 @@ interface LineTabsProps extends Omit<MuiTabsProps, 'onChange'> {
   iconPosition?: TabProps['iconPosition'];
 }
 
-function LineTabs({ tabs, current, onChange, iconPosition, ...rest }: LineTabsProps) {
+function LineTabs({ tabs, current, onChange, iconPosition = undefined, ...rest }: LineTabsProps) {
   return (
     <MuiTabs
       scrollButtons="auto"
@@ -176,7 +176,14 @@ interface TabsProps extends Omit<MuiTabsProps, 'variant' | 'onChange'> {
   iconPosition?: TabProps['iconPosition'];
 }
 
-export default function Tabs({ tabs, current, onChange, variant, iconPosition, ...rest }: TabsProps) {
+export default function Tabs({
+  tabs,
+  current,
+  onChange,
+  variant = undefined,
+  iconPosition = undefined,
+  ...rest
+}: TabsProps) {
   if (variant === 'card') {
     return <CardTabs {...rest} tabs={tabs} current={current} onChange={onChange} iconPosition={iconPosition} />;
   }

package/src/Tag/index.jsx

@@ -46,7 +46,7 @@ const types = {
  * @param {TagProps} props
  * @return {import('react').ReactNode}
  */
-function Tag(rawProps) {
+function Tag({ ...rawProps }) {
   const props = Object.assign({}, rawProps);
   if (isUndefined(props.type)) {
     props.type = 'primary';

package/src/TextCollapse/index.tsx

@@ -19,7 +19,7 @@ function TextCollapse({
   startChars = 5,
   endChars = 5,
   scaleFactor = 0.45,
-  style,
+  style = undefined,
   fontType = 'normal',
   ...rest
 }: TextCollapseProps) {

package/src/Theme/theme-provider.tsx

@@ -44,7 +44,7 @@ const resolveMode = (prefer?: Prefer): PaletteMode => {
 };
 
 /** 深色模式全局样式 */
-function DarkSchemeStyles({ className }: { className?: string }) {
+function DarkSchemeStyles({ className = undefined }: { className?: string }) {
   const theme = useTheme();
 
   if (theme.palette.mode === 'dark') {
@@ -122,7 +122,7 @@ interface BaseThemeProviderProps {
 
 /** 快速配置 MUI 主题 */
 function BaseThemeProvider({
-  children,
+  children = null,
   theme = defaultTheme,
   injectFirst = true,
   darkSchemeClass = '',
@@ -157,9 +157,9 @@ interface ColorSchemeProviderProps extends BaseThemeProviderProps {
 
 /** 配置带颜色模式切换功能的 MUI 主题 */
 function ColorSchemeProvider({
-  children,
-  theme: themeInput,
-  prefer,
+  children = null,
+  theme: themeInput = undefined,
+  prefer = undefined,
   disableBlockletTheme = false,
   ...rest
 }: ThemeProviderProps) {
@@ -276,7 +276,12 @@ export interface ThemeProviderProps extends ColorSchemeProviderProps {
   enableColorScheme?: boolean;
 }
 
-export default function ThemeProvider({ children, prefer, enableColorScheme = false, ...props }: ThemeProviderProps) {
+export default function ThemeProvider({
+  children = null,
+  prefer = undefined,
+  enableColorScheme = false,
+  ...props
+}: ThemeProviderProps) {
   const { toggleMode } = useColorScheme();
 
   if (enableColorScheme || prefer || !toggleMode) {

package/src/Theme/theme.ts

@@ -33,6 +33,7 @@ export function isTheme(obj: any): obj is Theme {
 
 /** 是否是 UX Theme 对象 */
 export function isUxTheme(obj: any): obj is Theme {
+  // @ts-expect-error
   return isTheme(obj) && obj.__isUxTheme__ === true;
 }
 
@@ -118,6 +119,7 @@ export function lazyCreateDefaultTheme(mode: PaletteMode) {
 }
 
 // 主要处理 overrides
+// @ts-expect-error
 const normalizeUserThemeOptions = ({ palette, components, overrides, ...rest }: UxThemeOptions) => {
   const result: UxThemeOptions = {
     palette,
@@ -132,6 +134,7 @@ const normalizeUserThemeOptions = ({ palette, components, overrides, ...rest }:
 };
 
 const defaultUxThemeOptions: UxThemeOptions = {
+  // @ts-expect-error
   themeName: 'ArcBlock',
   pageWidth: 'md',
   disableBlockletTheme: false,
@@ -167,6 +170,7 @@ export const create = (...args: Array<UxThemeOptions | ((baseTheme: Theme) => Ux
       deepmerge(acc, normalizeUserThemeOptions(typeof curr === 'function' ? curr(createBaseTheme()) : curr)),
     normalizeUserThemeOptions(defaultUxThemeOptions)
   );
+  // @ts-expect-error
   const prefer = userThemeOptions.mode || userThemeOptions.palette?.mode || defaultPrefer;
   const blockletThemeOptions = getBlockletThemeOptions(prefer);
   const defaultThemeOptions = createDefaultThemeOptions(prefer);
@@ -188,6 +192,7 @@ export const create = (...args: Array<UxThemeOptions | ((baseTheme: Theme) => Ux
 
   // 创建主题
   const theme = _createTheme(mergedThemeOptions);
+  // @ts-expect-error
   theme.__isUxTheme__ = true;
 
   // 异步加载字体

package/src/Typography/index.tsx

@@ -31,7 +31,7 @@ export default function Typography({
   children = null,
   minFontSize = 12,
   /* 设置为 auto 时字体会自动收缩，直到达到浏览器最小字体限制 */
-  fontSize,
+  fontSize = undefined,
   sx,
   onShrink = noop,
   ...rest

package/src/UserCard/Cards/basic-info.tsx

@@ -11,7 +11,7 @@ interface BasicCardProps extends Omit<UserCardProps, 'user'> {
 }
 
 // 详细卡片模式下的Basic渲染组件
-function BasicCard(props: BasicCardProps) {
+function BasicCard({ ...props }: BasicCardProps) {
   const {
     user,
     avatarSize = 40,

package/src/UserCard/Cards/index.tsx

@@ -10,7 +10,7 @@ interface DetailedCardProps extends Omit<UserCardProps, 'user'> {
 }
 
 // DetailedCard组件，根据infoType选择不同的卡片组件进行渲染
-function DetailedCard(props: DetailedCardProps) {
+function DetailedCard({ ...props }: DetailedCardProps) {
   const { infoType = InfoType.Minimal } = props;
 
   // 根据信息类型选择合适的卡片组件

package/src/UserCard/Container/card.tsx

@@ -18,8 +18,8 @@ function CardContainer({
   children,
   cardType = CardType.Detailed,
   variant = 'box',
-  containerRef,
-  sx,
+  containerRef = undefined,
+  sx = {},
 }: CardContainerProps) {
   const commonStyles = {
     minWidth: 320,

package/src/UserCard/Container/dialog.tsx

@@ -11,7 +11,7 @@ interface DialogContainerProps {
 /**
  * 统一的卡片容器组件，处理常见的布局容器样式
  */
-function DialogContainer({ children, sx }: DialogContainerProps) {
+function DialogContainer({ children, sx = {} }: DialogContainerProps) {
   // Box变体，用于Minimal和NameOnly类型卡片
   const theme = useTheme();
   return (

package/src/UserCard/Content/basic.tsx

@@ -99,7 +99,7 @@ function LinkField({ value }: { value: string }) {
   );
 }
 
-function BasicField({ field, value, children }: { field: string; value: string; children?: React.ReactNode }) {
+function BasicField({ field, value, children = null }: { field: string; value: string; children?: React.ReactNode }) {
   const Icon = IconMap[field as keyof typeof IconMap];
   const theme = useTheme();
   const isDark = theme.palette.mode === 'dark';
@@ -125,7 +125,7 @@ function BasicField({ field, value, children }: { field: string; value: string;
   );
 }
 
-function BasicContent({ user, renderFields }: BasicContentProps) {
+function BasicContent({ user, renderFields = undefined }: BasicContentProps) {
   const fields = useCreation(() => {
     return renderFields ?? ['bio', 'email', 'phone', 'location', 'timezone', 'link'];
   }, [renderFields]);

package/src/UserCard/Content/minimal.tsx

@@ -15,7 +15,7 @@ interface MinimalContentProps extends UserCardProps {
   shortenLabelProps?: UserCardProps['shortenLabelProps'];
 }
 
-function MinimalContent(props: MinimalContentProps) {
+function MinimalContent({ ...props }: MinimalContentProps) {
   const {
     user,
     showDid,

package/src/UserCard/Content/tooltip-avatar.tsx

@@ -22,10 +22,10 @@ function TooltipAvatar({
   user,
   avatarSize,
   shouldShowHoverCard,
-  renderCardContent,
-  tooltipTitle,
-  tooltipProps,
-  avatarProps,
+  renderCardContent = undefined,
+  tooltipTitle = undefined,
+  tooltipProps = undefined,
+  avatarProps = undefined,
   onAvatarClick,
 }: TooltipAvatarProps) {
   const avatarElement = renderAvatar(

package/src/VerificationCode/index.tsx

@@ -12,7 +12,7 @@ export default function VerificationCode({
   code,
   onChange = noop,
   onComplete = noop,
-  sx,
+  sx = {},
 }: {
   length?: number;
   code: string;

package/src/WalletOSIcon/index.tsx

@@ -10,12 +10,17 @@ import { LOGIN_PROVIDER } from '../Util/constant';
 
 export interface WalletOSIconProps {
   loading?: false | true;
-  walletOS?: string;
+  walletOS: string;
   provider?: string;
   color?: string;
 }
 
-export default function WalletOSIcon({ loading = false, walletOS, provider, color = 'black' }: WalletOSIconProps) {
+export default function WalletOSIcon({
+  loading = false,
+  walletOS,
+  provider = 'wallet',
+  color = 'black',
+}: WalletOSIconProps) {
   if (loading) {
     return <Icon icon={QuestionMarkRoundedIcon} style={{ color: 'transparent' }} />;
   }