@arcblock/ux 3.0.5 → 3.0.7

package/lib/withTracker/error_boundary.js

@@ -1,7 +1,7 @@
 import { jsx as n } from "react/jsx-runtime";
 import { Component as s } from "react";
 import * as t from "@sentry/browser";
-import i from "../Alert/index.js";
+import i from "../Alert";
 class m extends s {
   constructor(r) {
     super(r), this.state = { error: null };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "3.0.5",
+  "version": "3.0.7",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -60,16 +60,16 @@
     "react": ">=19.0.0",
     "react-router-dom": ">=6.22.3"
   },
-  "gitHead": "1a7bd7691bda12a5d117eb57fe63e8a6486105d6",
+  "gitHead": "05185ed22660a8fea176616b19b6703456f2348c",
   "dependencies": {
-    "@arcblock/bridge": "3.0.5",
+    "@arcblock/bridge": "3.0.7",
     "@arcblock/did": "^1.20.15",
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "3.0.5",
-    "@arcblock/nft-display": "3.0.5",
-    "@arcblock/react-hooks": "3.0.5",
+    "@arcblock/icons": "3.0.7",
+    "@arcblock/nft-display": "3.0.7",
+    "@arcblock/react-hooks": "3.0.7",
     "@blocklet/js-sdk": "^1.16.44",
-    "@blocklet/theme": "3.0.5",
+    "@blocklet/theme": "3.0.7",
     "@fontsource/roboto": "~5.1.1",
     "@fontsource/ubuntu-mono": "^5.2.6",
     "@iconify-icons/logos": "^1.2.36",

package/src/ActionButton/index.jsx

@@ -27,7 +27,7 @@ import { withDeprecated } from '../Util/deprecate';
  * @param {ActionButtonProps} props
  * @returns {JSX.Element}
  */
-function ActionButton(rawProps) {
+function ActionButton({ ...rawProps }) {
   const props = Object.assign({}, rawProps);
   if (isUndefined(props.gradient)) {
     props.gradient = '';

package/src/Address/compact-text.jsx

@@ -70,7 +70,7 @@ export default function CompactText({ startChars = 6, endChars = 6, children, sh
 CompactText.propTypes = {
   startChars: PropTypes.number,
   endChars: PropTypes.number,
-  children: PropTypes.node,
+  children: PropTypes.node.isRequired,
   // 在 tooltip 中完整地址后显示复制按钮
   showCopyButtonInTooltip: PropTypes.bool,
 };

package/src/Address/did-address.tsx

@@ -56,7 +56,7 @@ export interface IDidAddressProps extends BoxProps {
  *   - 可配合 useMediaQuery 使用
  */
 function DidAddress({
-  ref,
+  ref = undefined,
   ...props
 }: IDidAddressProps & {
   ref?: React.Ref<unknown>;

package/src/Address/index.tsx

@@ -6,7 +6,7 @@ export interface IDidAddressWrapper extends IDidAddressProps {
 }
 
 function DidAddressWrapper({
-  ref,
+  ref = undefined,
   responsive = true,
   ...rest
 }: IDidAddressWrapper & {

package/src/Address/responsive-did-address.tsx

@@ -15,9 +15,9 @@ import { getFontSize } from '../Util';
  * - 监听容器宽度变化, 当容器宽度变化时, 对比容器宽度和 did address full-width, => 切换 compact 模式
  */
 export default function ResponsiveDidAddress({
-  ref,
-  style,
-  className,
+  ref = undefined,
+  style = {},
+  className = undefined,
   component = 'span',
   size = 0,
   ...rest

package/src/Alert/index.jsx

@@ -55,7 +55,7 @@ const types = {
  * @param {AlertProps} props
  * @returns {JSX.Element}
  */
-function Alert(rawProps) {
+function Alert({ ...rawProps }) {
   const props = Object.assign({}, rawProps);
   if (isUndefined(props.type)) {
     props.type = 'tip';

package/src/Avatar/index.jsx

@@ -31,7 +31,7 @@ import { DID_PREFIX } from '../Util/constant';
  * @param {AvatarProps} props
  * @returns {JSX.Element}
  */
-function Avatar(rawProps) {
+function Avatar({ ...rawProps }) {
   const props = Object.assign({}, rawProps);
   if (isUndefined(props.did)) {
     props.did = '';

package/src/Badge/index.jsx

@@ -46,7 +46,7 @@ const types = {
  * @param {BadgeProps} props
  * @returns {JSX.Element}
  */
-function Badge(rawProps) {
+function Badge({ ...rawProps }) {
   const props = Object.assign({}, rawProps);
   if (isUndefined(props.type)) {
     props.type = 'primary';

package/src/BlockletContext/index.tsx

@@ -18,7 +18,7 @@ function BlockletProvider({
   baseUrl = '',
   loading = null,
 }: {
-  children?: React.ReactNode;
+  children: React.ReactNode;
   /**
    * baseUrl 为 blocklet origin + blocklet prefix
    */

package/src/BlockletNFT/index.jsx

@@ -226,7 +226,7 @@ BlockletIcon.propTypes = {
  */
 export default function BlockletNFT({
   title,
-  did,
+  did = undefined,
   description = null,
   cover = null,
   size = 'auto',

package/src/BlockletV2/blocklet.tsx

@@ -48,7 +48,7 @@ export interface IBlockletStore extends CardProps {
   }[];
 }
 
-export default function BlockletStore(props: IBlockletStore) {
+export default function BlockletStore({ ...props }: IBlockletStore) {
   const {
     title,
     description = '',

package/src/BlockletV2/components/icon-text.tsx

@@ -3,11 +3,11 @@ import React from 'react';
 import TooltipIcon from './tooltip-icon';
 
 export default function IconText({
-  icon,
-  children,
+  icon = null,
+  children = null,
   maxWidth = 100,
-  title,
-  sx,
+  title = undefined,
+  sx = {},
 }: {
   icon?: React.ReactNode;
   children?: React.ReactNode;

package/src/BlockletV2/components/tooltip-icon.tsx

@@ -1,4 +1,5 @@
 import { Tooltip, TooltipProps, tooltipClasses } from '@mui/material';
+import { mergeSx } from '../../Util/style';
 
 export interface TooltipIconProps extends TooltipProps {
   fontSize?: number | string;
@@ -24,7 +25,7 @@ export default function TooltipIcon({
       slotProps={{
         popper: {
           ...slotProps?.popper,
-          sx: [
+          sx: mergeSx(
             {
               [`& .${tooltipClasses.tooltip}`]: {
                 fontSize,
@@ -38,8 +39,9 @@ export default function TooltipIcon({
                 alignItems: 'center',
               },
             },
-            ...(Array.isArray(slotProps?.popper?.sx) ? slotProps.popper.sx : [slotProps?.popper?.sx]),
-          ],
+            // @ts-expect-error
+            slotProps?.popper?.sx
+          ),
         },
       }}>
       {children}

package/src/Button/wrap.jsx

@@ -43,7 +43,7 @@ export default function wrap(BaseComponent) {
    * @param {ButtonProps} props
    * @returns
    */
-  function WrappedComponent(rawProps) {
+  function WrappedComponent({ ...rawProps }) {
     const props = Object.assign({}, rawProps);
     if (isUndefined(props.rounded)) {
       props.rounded = false;

package/src/Center/index.tsx

@@ -1,7 +1,7 @@
 import { styled } from '../Theme';
 
 export default function Center({
-  children,
+  children = null,
   relative = 'screen',
 }: {
   children?: React.ReactNode;

package/src/ClickToCopy/copy-button.tsx

@@ -15,7 +15,7 @@ export interface CopyButtonProps extends React.HTMLAttributes<HTMLSpanElement> {
 export default function CopyButton({
   content = '',
   locale = 'en',
-  render,
+  render = undefined,
   showTooltip = true,
   ...rest
 }: CopyButtonProps) {

package/src/CloseButton/index.tsx

@@ -8,7 +8,7 @@ import { mergeSx } from '../Util/style';
 
 export default function CloseButton({
   onClose = noop,
-  sx,
+  sx = {},
   size = 20,
 }: {
   onClose?: () => void;

package/src/ContactForm/index.tsx

@@ -221,7 +221,10 @@ const Form = styled('form', {
   .title {
     font-size: 30px;
     text-align: center;
-    color: ${(props) => props.theme.typography.color.main};
+    color: ${(props) => {
+      // @ts-expect-error
+      return props.theme.typography.color.main;
+    }};
   }
 
   .form-controls {
@@ -234,7 +237,11 @@ const Form = styled('form', {
       width: ${(props) => getInputWidth(props)};
       height: 50px;
       border: none;
-      border-bottom: 1px solid ${(props) => props.theme.typography.color.main};
+      border-bottom: 1px solid
+        ${(props) => {
+          // @ts-expect-error
+          return props.theme.typography.color.main;
+        }};
       font-size: 16px;
       letter-spacing: 1.8px;
       outline: none;

package/src/DID/index.tsx

@@ -7,6 +7,7 @@ import { Box, Dialog, DialogContent, ModalProps, Typography } from '@mui/materia
 import { useCreation, useMemoizedFn } from 'ahooks';
 import { useImperativeHandle, useRef, useState } from 'react';
 import { toAddress } from '@arcblock/did';
+import noop from 'lodash/noop';
 
 import Address, { IDidAddressWrapper } from '../Address';
 import Avatar from '../Avatar';
@@ -137,7 +138,7 @@ export interface HTMLDIDElement extends HTMLDidAddressElement {
 }
 
 export function DID({
-  ref,
+  ref = undefined,
   ...props
 }: DIDProps & {
   ref?: React.Ref<unknown>;
@@ -261,15 +262,15 @@ export interface DIDDialogProps extends DIDProps {
 }
 export function DIDDialog({
   did,
-  chainId,
-  roleType,
+  chainId = undefined,
+  roleType = undefined,
   showAvatar = true,
   // DialogProps
   open,
   fullScreen = false,
   fullWidth = false,
   scroll = 'paper',
-  onClose,
+  onClose = noop,
   // AddressProps
   locale = 'en',
   ...rest

package/src/DIDConnect/app-info-item.tsx

@@ -13,7 +13,7 @@ export default function AppInfoItem({
   appInfo,
   active = false,
   appLogo = null,
-  sx,
+  sx = {},
 }: {
   appInfo: any;
   active?: boolean;

package/src/DIDConnect/auth-apps/index.tsx

@@ -37,20 +37,20 @@ export default function AuthApps({
   session,
   requestAppInfo,
   currentAppInfo,
-  children,
-  userInfo,
+  children = null,
+  userInfo = undefined,
 
   hideSwitchConnect = false,
   hideAuthorize = false,
   hideCancel = false,
 
-  notThisText,
-  authorizeText,
-  connectText,
-  cancelText,
-  useAnotherText,
+  notThisText = undefined,
+  authorizeText = undefined,
+  connectText = undefined,
+  cancelText = undefined,
+  useAnotherText = undefined,
 
-  slotProps,
+  slotProps = undefined,
 
   onConnect = noop,
   onAuthorize = noop,

package/src/DIDConnect/did-connect-container.tsx

@@ -33,8 +33,8 @@ export default function DIDConnectContainer({
   popup = false,
   hideCloseButton = false,
   children,
-  appPid,
-  slotProps,
+  appPid = undefined,
+  slotProps = undefined,
   onClose = noop,
   keepMounted = false,
 }: {

package/src/DIDConnect/did-connect-footer.tsx

@@ -13,7 +13,7 @@ import { DID_CONNECT_MEDIUM_WIDTH } from '../Util/constant';
 export default function DIDConnectFooter({
   currentAppInfo = globalThis.blocklet,
   currentAppColor = globalThis.blocklet?.appPid ? getDIDColor(globalThis.blocklet?.appPid) : '#fff',
-  sx,
+  sx = {},
 }: {
   currentAppInfo?: any;
   currentAppColor?: string;

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) {