@arcblock/ux 3.0.6 → 3.0.8

package/lib/UserCard/Cards/index.d.ts

@@ -5,5 +5,5 @@ interface DetailedCardProps extends Omit<UserCardProps, 'user'> {
     shouldShowHoverCard: boolean;
     renderCardContent?: () => React.ReactNode | null;
 }
-declare function DetailedCard(props: DetailedCardProps): import("react/jsx-runtime").JSX.Element;
+declare function DetailedCard({ ...props }: DetailedCardProps): import("react/jsx-runtime").JSX.Element;
 export default DetailedCard;

package/lib/UserCard/Cards/index.js

@@ -2,7 +2,7 @@ import { jsx as t } from "react/jsx-runtime";
 import { InfoType as a } from "../types.js";
 import i from "./name-only.js";
 import m from "./basic-info.js";
-function l(r) {
+function l({ ...r }) {
   const { infoType: e = a.Minimal } = r;
   switch (e) {
     case a.NameOnly:

package/lib/UserCard/Container/card.js

@@ -1,13 +1,13 @@
-import { jsx as l } from "react/jsx-runtime";
-import { Paper as d, Box as p } from "@mui/material";
+import { jsx as d } from "react/jsx-runtime";
+import { Paper as m, Box as p } from "@mui/material";
 import { CardType as r } from "../types.js";
 import { mergeSx as n } from "../../Util/style.js";
 function b({
   children: e,
   cardType: o = r.Detailed,
-  variant: m = "box",
-  containerRef: t,
-  sx: i
+  variant: l = "box",
+  containerRef: t = void 0,
+  sx: i = {}
 }) {
   const a = {
     minWidth: 320,
@@ -18,7 +18,7 @@ function b({
       borderColor: "divider"
     } : {}
   };
-  return m === "paper" ? /* @__PURE__ */ l(d, { ref: t, elevation: 0, sx: a, children: e }) : /* @__PURE__ */ l(
+  return l === "paper" ? /* @__PURE__ */ d(m, { ref: t, elevation: 0, sx: a, children: e }) : /* @__PURE__ */ d(
     p,
     {
       ref: t,

package/lib/UserCard/Container/dialog.js

@@ -1,7 +1,7 @@
 import { jsx as i } from "react/jsx-runtime";
 import { useTheme as t, Box as d } from "@mui/material";
 import { mergeSx as a } from "../../Util/style.js";
-function p({ children: o, sx: r }) {
+function p({ children: o, sx: r = {} }) {
   const e = t();
   return /* @__PURE__ */ i(
     d,

package/lib/UserCard/Content/basic.js

@@ -71,7 +71,7 @@ function K({ value: e }) {
     ) })
   ] });
 }
-function S({ field: e, value: s, children: a }) {
+function S({ field: e, value: s, children: a = null }) {
   const h = q[e], m = k().palette.mode === "dark", c = x(m);
   return /* @__PURE__ */ y(
     f,
@@ -90,7 +90,7 @@ function S({ field: e, value: s, children: a }) {
     e
   );
 }
-function se({ user: e, renderFields: s }) {
+function se({ user: e, renderFields: s = void 0 }) {
   var w;
   const a = p(() => s ?? ["bio", "email", "phone", "location", "timezone", "link"], [s]), h = p(() => a.includes("bio"), [a]), l = p(() => e.metadata ?? {
     joinedAt: e == null ? void 0 : e.createdAt,

package/lib/UserCard/Content/minimal.d.ts

@@ -8,6 +8,6 @@ interface MinimalContentProps extends UserCardProps {
     avatarProps?: UserCardProps['avatarProps'];
     shortenLabelProps?: UserCardProps['shortenLabelProps'];
 }
-declare function MinimalContent(props: MinimalContentProps): import("react/jsx-runtime").JSX.Element;
+declare function MinimalContent({ ...props }: MinimalContentProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof MinimalContent>;
 export default _default;

package/lib/UserCard/Content/minimal.js

@@ -5,7 +5,7 @@ import { DID as y } from "../../DID/index.js";
 import C from "./tooltip-avatar.js";
 import { renderTopRight as b } from "../components.js";
 import v from "./shorten-label.js";
-function W(n) {
+function W({ ...n }) {
   const {
     user: e,
     showDid: a,

package/lib/UserCard/Content/tooltip-avatar.js

@@ -1,28 +1,28 @@
 import { jsx as n } from "react/jsx-runtime";
-import { Tooltip as l, Zoom as f } from "@mui/material";
+import { Tooltip as i, Zoom as f } from "@mui/material";
 import { renderAvatar as c } from "../components.js";
-function d({
-  user: i,
+function x({
+  user: l,
   avatarSize: m,
-  shouldShowHoverCard: e,
-  renderCardContent: o,
-  tooltipTitle: t,
-  tooltipProps: a,
-  avatarProps: p,
+  shouldShowHoverCard: r,
+  renderCardContent: e = void 0,
+  tooltipTitle: t = void 0,
+  tooltipProps: a = void 0,
+  avatarProps: p = void 0,
   onAvatarClick: s
 }) {
-  const r = c(
-    i,
+  const o = c(
+    l,
     m,
     p,
     s,
-    e || !!t
+    r || !!t
   );
-  return t ? /* @__PURE__ */ n(l, { enterDelay: 200, title: t, placement: "bottom", ...a ?? {}, children: r }) : e ? /* @__PURE__ */ n(
-    l,
+  return t ? /* @__PURE__ */ n(i, { enterDelay: 200, title: t, placement: "bottom", ...a ?? {}, children: o }) : r ? /* @__PURE__ */ n(
+    i,
     {
       enterDelay: 200,
-      title: o ? o() : null,
+      title: e ? e() : null,
       placement: "bottom",
       arrow: !1,
       ...a ?? {},
@@ -41,10 +41,10 @@ function d({
       slots: {
         transition: f
       },
-      children: r
+      children: o
     }
-  ) : r;
+  ) : o;
 }
 export {
-  d as default
+  x as default
 };

package/lib/VerificationCode/index.js

@@ -10,7 +10,7 @@ function j({
   code: e,
   onChange: u = a,
   onComplete: p = a,
-  sx: s
+  sx: s = {}
 }) {
   return c(() => {
     e.length === i && (p == null || p(e));

package/lib/WalletOSIcon/index.d.ts

@@ -1,7 +1,7 @@
 export interface WalletOSIconProps {
     loading?: false | true;
-    walletOS?: string;
+    walletOS: string;
     provider?: string;
     color?: string;
 }
-export default function WalletOSIcon({ loading, walletOS, provider, color }: WalletOSIconProps): import("react/jsx-runtime").JSX.Element | null;
+export default function WalletOSIcon({ loading, walletOS, provider, color, }: WalletOSIconProps): import("react/jsx-runtime").JSX.Element | null;

package/lib/WalletOSIcon/index.js

@@ -7,8 +7,13 @@ import a from "@iconify-icons/material-symbols/android";
 import c from "@iconify-icons/material-symbols/question-mark-rounded";
 import u from "@iconify-icons/material-symbols/mail-outline-rounded";
 import { LOGIN_PROVIDER as p } from "../Util/constant.js";
-function x({ loading: t = !1, walletOS: i, provider: e, color: n = "black" }) {
-  return t ? /* @__PURE__ */ r(o, { icon: c, style: { color: "transparent" } }) : e === p.AUTH0 ? /* @__PURE__ */ r(o, { icon: u, style: { color: n, transform: "scale(0.85)" } }) : i === "ios" ? /* @__PURE__ */ r(o, { icon: f, style: { color: n, transform: "scale(1.1)" } }) : i === "android" ? /* @__PURE__ */ r(o, { icon: a, style: { color: n } }) : i === "web" ? /* @__PURE__ */ r(o, { icon: s, style: { color: n } }) : i === "api" ? /* @__PURE__ */ r(o, { icon: m, style: { color: n, transform: "scale(1.05)" } }) : null;
+function x({
+  loading: i = !1,
+  walletOS: t,
+  provider: e = "wallet",
+  color: n = "black"
+}) {
+  return i ? /* @__PURE__ */ r(o, { icon: c, style: { color: "transparent" } }) : e === p.AUTH0 ? /* @__PURE__ */ r(o, { icon: u, style: { color: n, transform: "scale(0.85)" } }) : t === "ios" ? /* @__PURE__ */ r(o, { icon: f, style: { color: n, transform: "scale(1.1)" } }) : t === "android" ? /* @__PURE__ */ r(o, { icon: a, style: { color: n } }) : t === "web" ? /* @__PURE__ */ r(o, { icon: s, style: { color: n } }) : t === "api" ? /* @__PURE__ */ r(o, { icon: m, style: { color: n, transform: "scale(1.05)" } }) : null;
 }
 export {
   x as default

package/lib/WebWalletSWKeeper/index.d.ts

@@ -2,7 +2,9 @@ interface WebWalletSWKeeperProps {
     webWalletUrl: string;
     maxIdleTime: number;
 }
-declare function WebWalletSWKeeper({ webWalletUrl, maxIdleTime }: WebWalletSWKeeperProps): null;
+declare function WebWalletSWKeeper({ webWalletUrl, maxIdleTime, }: WebWalletSWKeeperProps & {
+    maxIdleTime?: number;
+}): null;
 export declare const withWebWalletSWKeeper: <P extends {
     webWalletUrl: string;
 }>(Component: React.ComponentType<P>) => ({ webWalletUrl, maxIdleTime, ...rest }: WebWalletSWKeeperProps & P) => import("react/jsx-runtime").JSX.Element;

package/lib/WebWalletSWKeeper/index.js

@@ -18,7 +18,10 @@ const g = (t) => {
 }, A = (t) => {
   s || (s = `web_wallet_sw_keeper_${Date.now()}`, g(t));
 };
-function K({ webWalletUrl: t, maxIdleTime: e = I }) {
+function K({
+  webWalletUrl: t,
+  maxIdleTime: e = I
+}) {
   const o = b(!!s), n = E(e), r = () => {
     o.current || k();
   };

package/lib/withTheme/index.d.ts

@@ -1,8 +1,9 @@
-import { Breakpoint, PaletteMode, PaletteOptions, TypographyOptions } from '@mui/material';
+import { Breakpoint, PaletteMode, PaletteOptions } from '@mui/material';
+import { TypographyStyleOptions } from '@mui/material/styles/createTypography';
 declare function withTheme<P extends object>(Component: React.ComponentType<P>, { mode, pageWidth, palette, typography, }?: {
     mode?: PaletteMode;
     pageWidth?: Breakpoint;
     palette?: PaletteOptions;
-    typography?: TypographyOptions;
+    typography?: TypographyStyleOptions;
 }): (props: P) => import("react/jsx-runtime").JSX.Element;
 export default withTheme;

package/lib/withTheme/index.js

@@ -1,18 +1,18 @@
-import { jsxs as c, jsx as e } from "react/jsx-runtime";
-import { useEffect as p } from "react";
-import { css as f, Global as h } from "@emotion/react";
-import { CssBaseline as d } from "@mui/material";
-import { createTheme as y } from "../Theme/theme.js";
-import u from "../Theme/theme-provider.js";
-function S(r, {
+import { jsxs as p, jsx as e } from "react/jsx-runtime";
+import { useEffect as f } from "react";
+import { css as h, Global as d } from "@emotion/react";
+import { CssBaseline as y } from "@mui/material";
+import { createTheme as u } from "../Theme/theme.js";
+import g from "../Theme/theme-provider.js";
+function k(r, {
   mode: i = "light",
   pageWidth: n = "md",
   palette: s,
   typography: a
 } = {}) {
-  const o = y({ mode: i, pageWidth: n, palette: s, typography: a }), m = f`
+  const o = u({ mode: i, pageWidth: n, palette: s, typography: a }), m = o.typography.color.main, l = h`
     font-family: ${o.typography.fontFamily};
-    color: ${o.typography.color.main};
+    color: ${m};
 
     a,
     a:hover,
@@ -43,17 +43,17 @@ function S(r, {
       }
     }
   `;
-  return function(l) {
-    return p(() => {
+  return function(c) {
+    return f(() => {
       const t = document.querySelector("#jss-server-side");
       t && t.parentNode && t.parentNode.removeChild(t);
-    }, []), /* @__PURE__ */ c(u, { theme: o, children: [
-      /* @__PURE__ */ e(d, {}),
-      /* @__PURE__ */ e(h, { styles: m }),
-      /* @__PURE__ */ e(r, { ...l })
+    }, []), /* @__PURE__ */ p(g, { theme: o, children: [
+      /* @__PURE__ */ e(y, {}),
+      /* @__PURE__ */ e(d, { styles: l }),
+      /* @__PURE__ */ e(r, { ...c })
     ] });
   };
 }
 export {
-  S as default
+  k as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "3.0.6",
+  "version": "3.0.8",
   "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": "b985886f6650c3df0f48665c71d7a8ce0d9bdb93",
+  "gitHead": "30b21395b2f3ef6824df728aeafd10e9dea173d9",
   "dependencies": {
-    "@arcblock/bridge": "3.0.6",
+    "@arcblock/bridge": "3.0.8",
     "@arcblock/did": "^1.20.15",
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "3.0.6",
-    "@arcblock/nft-display": "3.0.6",
-    "@arcblock/react-hooks": "3.0.6",
+    "@arcblock/icons": "3.0.8",
+    "@arcblock/nft-display": "3.0.8",
+    "@arcblock/react-hooks": "3.0.8",
     "@blocklet/js-sdk": "^1.16.44",
-    "@blocklet/theme": "3.0.6",
+    "@blocklet/theme": "3.0.8",
     "@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;