@arcblock/ux 3.0.6 → 3.0.8

package/src/DIDConnect/landing-page.tsx

@@ -25,13 +25,13 @@ type LandingPageProps = {
 export default function LandingPage({
   did,
   children,
-  title,
-  description,
-  actions,
-  logo,
+  title = undefined,
+  description = undefined,
+  actions = undefined,
+  logo = undefined,
   logoSize = 50,
-  poweredBy,
-  termsOfUse,
+  poweredBy = undefined,
+  termsOfUse = undefined,
   standalone = false,
 }: LandingPageProps) {
   const blockletData = globalThis?.blocklet || globalThis?.env || {};

package/src/DIDConnect/request-storage-access-api-dialog.tsx

@@ -68,7 +68,7 @@ const translations: Record<
 };
 
 function RequestStorageAccessApiDialog({
-  ref,
+  ref = undefined,
   locale = 'en',
   src,
   storageAccessState,
@@ -289,7 +289,6 @@ function RequestStorageAccessApiDialog({
 
                 currentState.callback(value, 'broswer');
               }}
-              locale={locale}
               src={src}
               sx={{
                 zIndex: 1,

package/src/Datatable/CustomToolbar.jsx

@@ -32,7 +32,7 @@ function useMobile() {
   return useMediaQuery(theme.breakpoints.down('sm'));
 }
 
-export default function CustomToolbar(props) {
+export default function CustomToolbar({ ...props }) {
   const [menuIconEl, setMenuIconEl] = useState(null);
   const moreBtn = useRef(null);
   const isMobile = useMobile();

package/src/Datatable/index.jsx

@@ -78,7 +78,7 @@ const FilterLine = styled('div')`
   }
 `;
 
-function WrapFilterList(props) {
+function WrapFilterList({ ...props }) {
   const { filterLabel } = useDatatableContext();
   const hasFilter = !!(props.filterList ?? []).filter((e) => e.length).length;
   if (hasFilter) {
@@ -163,7 +163,7 @@ const fixCellProp = (tempObj, cellProps) => {
  * @returns
  */
 function ReDataTable({
-  data: originData = [],
+  data: originData,
   columns: originColumns,
   locale = 'en',
   options = {}, // The options object is usually a property supported by mui-datatable

package/src/Dialog/confirm.jsx

@@ -125,7 +125,7 @@ Confirm.propTypes = {
   open: PropTypes.bool.isRequired,
   onConfirm: PropTypes.func.isRequired,
   onCancel: PropTypes.func.isRequired,
-  children: PropTypes.node,
+  children: PropTypes.node.isRequired,
   showCancelButton: PropTypes.bool,
   showConfirmButton: PropTypes.bool,
   showCloseButton: PropTypes.bool,

package/src/Earth/index.tsx

@@ -101,7 +101,7 @@ function Earth({
   height = 600,
   enableRotation = false,
   rotationSpeed = 5,
-  activeMarkerId,
+  activeMarkerId = undefined,
   markers = [],
   colors: _colors = {},
 }: EarthProps) {

package/src/Footer/index.tsx

@@ -14,7 +14,7 @@ export interface FooterProps {
   addon?: React.ReactNode;
 }
 
-export default function Footer(props: FooterProps) {
+export default function Footer({ ...props }: FooterProps) {
   const newProps = mergeProps(props, Footer, ['dark', 'style']);
   const { className = '', copyStart = '2017', style = {}, brand = 'ArcBlock', dark = false, addon = null } = newProps;
 
@@ -84,7 +84,10 @@ const Container = styled('div', {
     flex-wrap: wrap;
 
     .footer-item {
-      color: ${(props) => props.theme.palette.text.hint};
+      color: ${(props) => {
+        // @ts-expect-error
+        return props.theme.palette.text.hint;
+      }};
       display: flex;
       align-items: center;
       flex-wrap: wrap;

package/src/Header/addon-button.tsx

@@ -2,11 +2,16 @@ import { Button, ButtonProps } from '@mui/material';
 
 type Props<D extends React.ElementType, P = {}> = {
   icon?: React.ReactNode;
-  children?: React.ReactNode;
+  children: React.ReactNode;
 } & ButtonProps<D, P>;
 
 // eslint-disable-next-line import/prefer-default-export
-export function AddonButton<D extends React.ElementType, P = {}>({ icon, children, sx, ...rest }: Props<D, P>) {
+export function AddonButton<D extends React.ElementType, P = {}>({
+  icon = undefined,
+  children,
+  sx,
+  ...rest
+}: Props<D, P>) {
   const mergedSx = [
     {
       height: 32,

package/src/Header/header.tsx

@@ -35,7 +35,7 @@ function Header({
   addons = null,
   prepend = null,
   align = 'left',
-  maxWidth,
+  maxWidth = false,
   homeLink = '/',
   ...rest
 }: HeaderProps) {

package/src/Header/responsive-header.tsx

@@ -18,7 +18,7 @@ export interface ResponsiveHeaderProps extends Omit<HeaderProps, 'children'> {
  *
  * 注意: 暂时不要通过 display: none 隐藏 logo, https://blog.patw.me/archives/1820/inline-svg-same-id-and-display-none-issue/
  */
-function ResponsiveHeader({ menu, prepend, children, ...rest }: ResponsiveHeaderProps) {
+function ResponsiveHeader({ prepend, children = null, ...rest }: ResponsiveHeaderProps) {
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down('md'));
   const [drawerOpen, setDrawerOpen] = useState(false);
@@ -69,7 +69,6 @@ function ResponsiveHeader({ menu, prepend, children, ...rest }: ResponsiveHeader
         prepend || (
           <Button
             sx={{ color: theme.palette.grey[500] }}
-            edge="start"
             className="header-menu"
             aria-label="header menu button"
             onClick={() => setDrawerOpen(!drawerOpen)}>

package/src/Icon/index.tsx

@@ -21,7 +21,7 @@ function Icon({
   variant = 'regular',
   rounded = false,
   className = '',
-  forwardedRef,
+  forwardedRef = undefined,
 }: IconProps) {
   const iconName = variant === 'solid' ? `fa-solid:${name}` : `fa-regular:${name}`;
   const content = <IconifyIcon icon={iconName} color={color} width={size} height={size} className={className} />;

package/src/InfoRow/index.tsx

@@ -6,7 +6,7 @@ import { styled } from '../Theme';
 
 export interface InfoRowProps {
   name: React.ReactNode;
-  nameFormatter: (name: React.ReactNode) => React.ReactNode;
+  nameFormatter?: (name: React.ReactNode) => React.ReactNode;
   layout?: 'horizontal' | 'vertical';
   children: React.ReactNode;
   valueComponent?: React.ElementType;
@@ -15,7 +15,6 @@ export interface InfoRowProps {
 
 function InfoRow({
   name,
-  // eslint-disable-next-line no-shadow
   nameFormatter = (rawName) => {
     if (typeof rawName === 'string') {
       return rawName

package/src/Layout/dashboard/external-link.tsx

@@ -43,7 +43,7 @@ export interface LinkProps extends RouterLinkProps {
   external?: false | true;
 }
 
-export function Link(props: LinkProps) {
+export function Link({ ...props }: LinkProps) {
   return <ExternalLink routerLinkComponent={RouterLink} {...props} />;
 }
 

package/src/Layout/dashboard/full-page.tsx

@@ -29,7 +29,7 @@ export const useFullPage = (initialState?: FullPageState) => {
   return ctx;
 };
 
-export function FullPageProvider({ children, ...rest }: { children?: React.ReactNode }) {
+export function FullPageProvider({ children = undefined, ...rest }: { children?: React.ReactNode }) {
   const [state, setState] = useState({
     inFullPage: false,
     showToggleButton: false,

package/src/Layout/dashboard/index.tsx

@@ -69,7 +69,7 @@ function Dashboard({
   fullWidth = false,
   dense = 'auto',
   footerProps = {},
-  sx,
+  sx = {},
   children,
   ...rest
 }: DashboardProps) {

package/src/Layout/dashboard/sidebar.tsx

@@ -54,7 +54,7 @@ export interface SidebarProps {
   dense?: false | true;
 }
 
-function Sidebar({ links, addons, dense = false, ...rest }: SidebarProps) {
+function Sidebar({ links, addons = undefined, dense = false, ...rest }: SidebarProps) {
   return (
     <Root {...rest} className={clsx({ 'layout-sidebar-dense': dense })}>
       <ul>{links.map(renderItem)}</ul>
@@ -177,7 +177,10 @@ const Root = styled('div')`
       line-height: 1;
     }
     .layout-sidebar-group {
-      color: ${(props) => props.theme.palette.text.hint};
+      color: ${(props) => {
+        // @ts-expect-error
+        return props.theme.palette.text.hint;
+      }};
       .layout-sidebar-group-title {
         display: inline-block;
         padding: 8px 0 8px 24px;

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

@@ -104,12 +104,12 @@ export interface HeaderProps extends AppBarProps {
 */
 export default function Header({
   onToggleMenu,
-  brand,
-  description,
-  addons,
-  brandAddon,
+  brand = undefined,
+  description = undefined,
+  addons = undefined,
+  brandAddon = undefined,
   homeUrl = '/',
-  logo,
+  logo = undefined,
   children,
   ...rest
 }: HeaderProps) {

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

@@ -60,14 +60,14 @@ export default function Dashboard({
   description = '',
   images,
   title = 'Home',
-  brandAddon,
-  headerAddon,
+  brandAddon = undefined,
+  headerAddon = undefined,
   prefix = '/images',
   fullWidth = false,
   contentLayout = 'column',
   className = '',
   homeUrl = '/',
-  logo,
+  logo = undefined,
   children,
   ...rest
 }: DashboardProps) {

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',