@arcblock/ux 2.10.30 → 2.10.32

package/babel.config.es.js

@@ -1,5 +1,6 @@
 module.exports = {
   presets: [
+    '@babel/preset-typescript',
     ['@babel/preset-env', { modules: false, targets: 'chrome 114' }],
     ['@babel/preset-react', { useBuiltIns: true, runtime: 'automatic' }],
   ],
@@ -9,5 +10,5 @@ module.exports = {
     '@babel/plugin-proposal-class-properties',
     './tools/sticky-react-runtime',
   ],
-  ignore: ['src/**/*.stories.js', 'src/**/demo'],
+  ignore: ['src/**/*.stories.js', 'src/**/demo', 'src/**/*.d.ts'],
 };

package/lib/ActionButton/index.d.ts

@@ -0,0 +1,18 @@
+declare const _default: (props: any) => import("react/jsx-runtime").JSX.Element;
+export default _default;
+/**
+ * Action button component
+ */
+export type ActionButtonProps = {
+    href: string;
+    children?: import("react").ReactNode;
+    gradient?: string;
+    color?: string;
+    icon?: string;
+    border?: string;
+    text?: string;
+    theme?: string;
+    variant?: string;
+    size?: string;
+    width?: string;
+};

package/lib/Alert/index.d.ts

@@ -1,4 +1,4 @@
-declare const _default: (props: any) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+declare const _default: (props: any) => import("react/jsx-runtime").JSX.Element;
 export default _default;
 /**
  * Alert notification component

package/lib/Avatar/did-motif.d.ts

@@ -6,7 +6,7 @@ declare function DIDMotif({ did, size, animation, shape, responsive, ...rest }:
     animation: any;
     shape: any;
     responsive: any;
-}): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+}): import("react/jsx-runtime").JSX.Element;
 declare namespace DIDMotif {
     namespace propTypes {
         let did: PropTypes.Validator<string>;
@@ -22,7 +22,7 @@ declare namespace DIDMotif {
         export { animation_1 as animation };
         let responsive_1: boolean;
         export { responsive_1 as responsive };
-        let shape_1: any;
+        let shape_1: null;
         export { shape_1 as shape };
     }
 }

package/lib/Badge/index.d.ts

@@ -1,4 +1,4 @@
-declare const _default: (props: any) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+declare const _default: (props: any) => import("react/jsx-runtime").JSX.Element;
 export default _default;
 /**
  * Badge component to display notification badge

package/lib/Blocklet/blocklet.d.ts

@@ -23,9 +23,9 @@
 declare function BlockletStore({ title, did, description, cover, version, button, buttonText, buttonDisabled, buttonLoading, onButtonClick, onMainClick, className, ...rest }: BlockletStoreProps): JSX.Element;
 declare namespace BlockletStore {
     namespace propTypes {
-        let title: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        let title: PropTypes.Requireable<string>;
         let did: PropTypes.Requireable<string>;
-        let description: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        let description: PropTypes.Requireable<string>;
         let cover: PropTypes.Requireable<string>;
         let buttonText: PropTypes.Requireable<string>;
         let buttonDisabled: PropTypes.Requireable<boolean>;
@@ -41,9 +41,9 @@ declare namespace BlockletStore {
         export { title_1 as title };
         let description_1: string;
         export { description_1 as description };
-        let cover_1: any;
+        let cover_1: null;
         export { cover_1 as cover };
-        let did_1: any;
+        let did_1: null;
         export { did_1 as did };
         let buttonText_1: string;
         export { buttonText_1 as buttonText };
@@ -51,15 +51,15 @@ declare namespace BlockletStore {
         export { buttonDisabled_1 as buttonDisabled };
         let buttonLoading_1: boolean;
         export { buttonLoading_1 as buttonLoading };
-        let button_1: any;
+        let button_1: null;
         export { button_1 as button };
-        let version_1: any;
+        let version_1: null;
         export { version_1 as version };
-        let onButtonClick_1: any;
+        let onButtonClick_1: null;
         export { onButtonClick_1 as onButtonClick };
-        let onMainClick_1: any;
+        let onMainClick_1: null;
         export { onMainClick_1 as onMainClick };
-        let className_1: any;
+        let className_1: null;
         export { className_1 as className };
     }
 }

package/lib/BlockletNFT/index.d.ts

@@ -0,0 +1,102 @@
+/**
+ * BlockletNFT 组件
+ * @typedef {{
+ *  title: string;
+ *  description?: string;
+ *  cover?: string;
+ *  did?: string;
+ *  isStickyButton?: boolean;
+ *  buttonText?: string;
+ *  buttonDisabled?: boolean;
+ *  buttonLoading?: boolean;
+ *  button?: JSX.Element;
+ *  addons?: Array<any>;
+ *  size?: 'xs' | 'sm' | 'md' | 'auto';
+ *  onButtonClick?: Function;
+ *  onMainClick?: Function;
+ *  onTagClick?: Function;
+ *  className?: string;
+ *  scaleClickZone?: number;
+ * } & import('react').ComponentPropsWithoutRef<"div"> } BlockletNFTProps
+ */
+/**
+ * BlockletNFT 组件
+ * @param {BlockletNFTProps} props
+ * @returns {JSX.Element}
+ */
+declare function BlockletNFT({ title, did, description, cover, size, addons, button, buttonText, buttonDisabled, buttonLoading, isStickyButton, onButtonClick, onMainClick, onTagClick, className, scaleClickZone, ...rest }: BlockletNFTProps): JSX.Element;
+declare namespace BlockletNFT {
+    namespace propTypes {
+        let title: PropTypes.Validator<string>;
+        let did: PropTypes.Requireable<string>;
+        let isStickyButton: PropTypes.Requireable<boolean>;
+        let description: PropTypes.Requireable<string>;
+        let cover: PropTypes.Requireable<string>;
+        let buttonText: PropTypes.Requireable<string>;
+        let buttonDisabled: PropTypes.Requireable<boolean>;
+        let buttonLoading: PropTypes.Requireable<boolean>;
+        let button: PropTypes.Requireable<PropTypes.ReactElementLike>;
+        let addons: PropTypes.Requireable<(object | null | undefined)[]>;
+        let size: PropTypes.Requireable<string>;
+        let onButtonClick: PropTypes.Requireable<(...args: any[]) => any>;
+        let onMainClick: PropTypes.Requireable<(...args: any[]) => any>;
+        let onTagClick: PropTypes.Requireable<(...args: any[]) => any>;
+        let className: PropTypes.Requireable<string>;
+        let scaleClickZone: PropTypes.Requireable<number>;
+    }
+    namespace defaultProps {
+        let description_1: null;
+        export { description_1 as description };
+        let cover_1: null;
+        export { cover_1 as cover };
+        let did_1: null;
+        export { did_1 as did };
+        let isStickyButton_1: boolean;
+        export { isStickyButton_1 as isStickyButton };
+        let buttonText_1: string;
+        export { buttonText_1 as buttonText };
+        let buttonDisabled_1: boolean;
+        export { buttonDisabled_1 as buttonDisabled };
+        let buttonLoading_1: boolean;
+        export { buttonLoading_1 as buttonLoading };
+        let button_1: null;
+        export { button_1 as button };
+        let size_1: string;
+        export { size_1 as size };
+        let addons_1: never[];
+        export { addons_1 as addons };
+        let onButtonClick_1: null;
+        export { onButtonClick_1 as onButtonClick };
+        let onMainClick_1: null;
+        export { onMainClick_1 as onMainClick };
+        let onTagClick_1: null;
+        export { onTagClick_1 as onTagClick };
+        let className_1: null;
+        export { className_1 as className };
+        let scaleClickZone_1: number;
+        export { scaleClickZone_1 as scaleClickZone };
+    }
+}
+export default BlockletNFT;
+/**
+ * BlockletNFT 组件
+ */
+export type BlockletNFTProps = {
+    title: string;
+    description?: string;
+    cover?: string;
+    did?: string;
+    isStickyButton?: boolean;
+    buttonText?: string;
+    buttonDisabled?: boolean;
+    buttonLoading?: boolean;
+    button?: JSX.Element;
+    addons?: Array<any>;
+    size?: "xs" | "sm" | "md" | "auto";
+    onButtonClick?: Function;
+    onMainClick?: Function;
+    onTagClick?: Function;
+    className?: string;
+    scaleClickZone?: number;
+} & import("react").ComponentPropsWithoutRef<"div">;
+import PropTypes from 'prop-types';

package/lib/Datatable/CustomToolbar.d.ts

@@ -1,4 +1,4 @@
-declare function CustomToolbar(props: any): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+declare function CustomToolbar(props: any): import("react/jsx-runtime").JSX.Element;
 declare namespace CustomToolbar {
     namespace propTypes {
         let data: PropTypes.Requireable<any[]>;
@@ -19,17 +19,17 @@ declare namespace CustomToolbar {
         let tableRef: PropTypes.Validator<(...args: any[]) => any>;
     }
     namespace defaultProps {
-        let data_1: any[];
+        let data_1: never[];
         export { data_1 as data };
         let components_1: {};
         export { components_1 as components };
-        let filterList_1: any[];
+        let filterList_1: never[];
         export { filterList_1 as filterList };
-        let filterData_1: any[];
+        let filterData_1: never[];
         export { filterData_1 as filterData };
         let title_1: string;
         export { title_1 as title };
-        let searchText_1: any;
+        let searchText_1: null;
         export { searchText_1 as searchText };
     }
 }

package/lib/Datatable/DatatableContext.d.ts

@@ -1,4 +1,4 @@
 export function DatatableProvider({ children }: {
     children: any;
-}): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+}): import("react/jsx-runtime").JSX.Element;
 export function useDatatableContext(): {};

package/lib/Datatable/TableSearch.d.ts

@@ -5,7 +5,7 @@ declare function TableSearch({ search, options, searchText, searchTextUpdate, se
     searchTextUpdate: any;
     searchClose: any;
     onSearchOpen: any;
-}): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+}): import("react/jsx-runtime").JSX.Element;
 declare namespace TableSearch {
     namespace propTypes {
         let search: PropTypes.Requireable<string>;

package/lib/Datatable/index.d.ts

@@ -13,15 +13,8 @@ export type DataTableCustomButton = {
 };
 export type DataTableColumn = {
     name: string;
-    label: string;
     width?: number;
     align?: "left" | "center" | "right";
-    options?: {
-        filter?: boolean;
-        sort?: boolean;
-        customBodyRender?: (value: any) => import("react").ReactElement;
-        customBodyRenderLite?: (index: number) => import("react").ReactElement;
-    } & import("mui-datatables").MUIDataTableColumnOptions;
 } & import("mui-datatables").MUIDataTableColumnDef;
 export type DataTableState = Pick<import("mui-datatables").MUIDataTableState, "count" | "page" | "rowsPerPage" | "searchText" | "sortOrder" | "filterList">;
 export type ModifiedMUIDataTableProps = {

package/lib/Datatable/index.js

@@ -25,15 +25,8 @@ import { styled } from '../Theme';
 /**
  * @typedef {{
  *  name: string,
- *  label: string,
  *  width?: number,
  *  align?: 'left' | 'center' | 'right',
- *  options?: {
- *    filter?: boolean,
- *    sort?: boolean,
- *    customBodyRender?: (value: any) => import('react').ReactElement,
- *    customBodyRenderLite?: (index: number) => import('react').ReactElement
- *  } & import('mui-datatables').MUIDataTableColumnOptions
  * } & import('mui-datatables').MUIDataTableColumnDef}  DataTableColumn
  */
 

package/lib/Dialog/dialog.d.ts

@@ -28,23 +28,22 @@ export type UxDialogProps = {
     /**
      * - Whether or not to show the close button.
      */
-    showCloseButton?: boolean;
+    showCloseButton?: boolean | undefined;
     /**
      * - The position of the actions toolbar.
      */
-    actionsPosition?: "left" | "center" | "right";
+    actionsPosition?: "left" | "right" | "center" | undefined;
     /**
      * - Props to be passed down to the dialog paper.
      */
-    PaperProps?: PaperStyle;
+    PaperProps?: PaperStyle | undefined;
     slotProps?: {
         content: object;
-        content: object;
-    };
+    } | undefined;
     /**
      * - Callback function fired when the dialog is closed.
      */
-    onClose?: (event: React.SyntheticEvent, reason: string) => void;
+    onClose?: ((event: React.SyntheticEvent, reason: string) => void) | undefined;
 };
 export type DialogProps = Omit<MuiDialogProps, "title" | "children" | "onClose" | "PaperProps" | "slotProps"> & UxDialogProps;
 /**
@@ -102,11 +101,11 @@ declare namespace Dialog {
     namespace defaultProps {
         let title_1: string;
         export { title_1 as title };
-        let prepend_1: any;
+        let prepend_1: null;
         export { prepend_1 as prepend };
-        let toolbar_1: any;
+        let toolbar_1: null;
         export { toolbar_1 as toolbar };
-        let actions_1: any;
+        let actions_1: null;
         export { actions_1 as actions };
         let showCloseButton_1: boolean;
         export { showCloseButton_1 as showCloseButton };
@@ -116,7 +115,7 @@ declare namespace Dialog {
         export { PaperProps_1 as PaperProps };
         let slotProps_1: {};
         export { slotProps_1 as slotProps };
-        let onClose_1: any;
+        let onClose_1: undefined;
         export { onClose_1 as onClose };
     }
 }

package/lib/Dialog/types.d.ts

@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react';
 
-export type OpenConfirmProps = {
+export interface OpenConfirmProps {
   title: ReactNode;
   content: ReactNode;
   onConfirm?: (close: () => void) => void;
@@ -8,7 +8,7 @@ export type OpenConfirmProps = {
   showCancelButton?: boolean;
   confirmButtonText?: string;
   cancelButtonText?: string;
-};
+}
 
 export type UpdateConfirmProps = Partial<Pick<OpenConfirmProps, 'title' | 'content'>>;
 

package/lib/Dialog/use-confirm.d.ts

@@ -1,5 +1,5 @@
 export default function useConfirm(props?: {}): {
-    confirmHolder: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    confirmHolder: import("react/jsx-runtime").JSX.Element;
     confirmApi: {
         open: import("./types").OpenConfirm;
         close: import("./types").CloseConfirm;

package/lib/Empty/index.d.ts

@@ -32,7 +32,7 @@ declare namespace Empty {
         export { color_1 as color };
         let size_1: number;
         export { size_1 as size };
-        let children_1: any;
+        let children_1: null;
         export { children_1 as children };
     }
 }

package/lib/Icon/index.d.ts

@@ -1,2 +1,2 @@
-declare const _default: (props: any) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+declare const _default: (props: any) => import("react/jsx-runtime").JSX.Element;
 export default _default;

package/lib/Img/index.d.ts

@@ -4,20 +4,20 @@ export type ImgExProps = {
      * - required
      */
     src: string;
-    alt?: string;
-    size?: string;
-    position?: string;
-    style?: object;
-    ratio?: number;
-    repeat?: string;
-    width?: number;
-    height?: number;
-    lazy?: boolean;
-    placeholder?: string;
-    fallback?: string;
-    className?: string;
-    onError?: Function;
-    onSuccess?: Function;
+    alt?: string | undefined;
+    size?: string | undefined;
+    position?: string | undefined;
+    style?: object | undefined;
+    ratio?: number | undefined;
+    repeat?: string | undefined;
+    width?: number | undefined;
+    height?: number | undefined;
+    lazy?: boolean | undefined;
+    placeholder?: string | undefined;
+    fallback?: string | undefined;
+    className?: string | undefined;
+    onError?: Function | undefined;
+    onSuccess?: Function | undefined;
 };
 export type ImgProps = ImgExProps & import("react").ComponentPropsWithoutRef<"div">;
 /**
@@ -45,7 +45,7 @@ declare namespace Img {
         let onSuccess: PropTypes.Requireable<(...args: any[]) => any>;
     }
     namespace defaultProps {
-        let alt_1: any;
+        let alt_1: null;
         export { alt_1 as alt };
         let size_1: string;
         export { size_1 as size };
@@ -53,19 +53,19 @@ declare namespace Img {
         export { position_1 as position };
         let repeat_1: string;
         export { repeat_1 as repeat };
-        let style_1: any;
+        let style_1: null;
         export { style_1 as style };
         let ratio_1: number;
         export { ratio_1 as ratio };
-        let width_1: any;
+        let width_1: null;
         export { width_1 as width };
-        let height_1: any;
+        let height_1: null;
         export { height_1 as height };
         let lazy_1: boolean;
         export { lazy_1 as lazy };
-        let placeholder_1: any;
+        let placeholder_1: null;
         export { placeholder_1 as placeholder };
-        let fallback_1: any;
+        let fallback_1: null;
         export { fallback_1 as fallback };
         let className_1: string;
         export { className_1 as className };

package/lib/Logo/index.d.ts

@@ -12,7 +12,7 @@
  * @param {LogoProps} props
  * @return {React.ReactComponentElement}
  */
-declare function Logo({ showText, showLogo, mode, layout, ...rest }: LogoProps): React.ReactComponentElement<any, Pick<any, string | number | symbol>>;
+declare function Logo({ showText, showLogo, mode, layout, ...rest }: LogoProps): import("react").ReactComponentElement<any, Pick<any, string | number | symbol>>;
 declare namespace Logo {
     namespace propTypes {
         let mode: PropTypes.Requireable<string>;
@@ -38,5 +38,4 @@ export type LogoProps = import("react").HTMLAttributes<HTMLSpanElement> & {
     showText?: boolean;
     showLogo?: boolean;
 };
-import React from "react";
 import PropTypes from 'prop-types';

package/lib/MuiWrap/index.d.ts

@@ -0,0 +1,7 @@
+import { BoxProps, TypographyProps } from '@mui/material';
+export declare function TBox<C extends React.ElementType>({ component, ...rest }: BoxProps<C, {
+    component: C;
+}>): import("react/jsx-runtime").JSX.Element;
+export declare function TTypography<C extends React.ElementType>({ component, ...rest }: TypographyProps<C, {
+    component: C;
+}>): import("react/jsx-runtime").JSX.Element;

package/lib/MuiWrap/index.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box, Typography } from '@mui/material';
+export function TBox({
+  component,
+  ...rest
+}) {
+  return /*#__PURE__*/_jsx(Box, {
+    component: component,
+    ...rest
+  });
+}
+export function TTypography({
+  component,
+  ...rest
+}) {
+  return /*#__PURE__*/_jsx(Typography, {
+    component: component,
+    ...rest
+  });
+}

package/lib/Passport/passport.js

@@ -30,13 +30,15 @@ export default function Passport({
       ,
       dangerouslySetInnerHTML: {
         __html: createPassportSvg({
-          title: passport.title || passport.name,
+          title: passport.scope === 'passport' ? passport.title : passport.name,
           issuer: passport.issuer && passport.issuer.name,
           issuerDid: passport.issuer && passport.issuer.id,
           ownerName: user.fullName,
           ownerDid: user.did,
           ownerAvatarUrl: user.avatar,
           revoked: passport.revoked,
+          scope: passport.scope,
+          role: passport.role,
           preferredColor: color,
           width
         })

package/lib/SplitButton/index.d.ts

@@ -0,0 +1,33 @@
+import PropTypes from 'prop-types';
+import MenuItem, { MenuItemProps } from '@mui/material/MenuItem';
+import { ButtonGroupProps } from '@mui/material/ButtonGroup';
+import { ButtonProps } from '@mui/material/Button';
+export interface SplitButtonProps extends Omit<ButtonGroupProps, 'children'> {
+    menu?: React.ReactElement<MenuItemProps, typeof MenuItem> | React.ReactElement<MenuItemProps, typeof MenuItem>[] | MenuItemProps[];
+    children?: JSX.Element | (() => JSX.Element);
+    onClick?: () => void;
+    menuButtonProps?: ButtonProps;
+}
+declare function SplitButton(props: SplitButtonProps): import("react/jsx-runtime").JSX.Element;
+declare namespace SplitButton {
+    var propTypes: {
+        size: PropTypes.Requireable<string>;
+        color: PropTypes.Requireable<string>;
+        menu: PropTypes.Requireable<NonNullable<any[] | PropTypes.ReactNodeLike>>;
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        variant: PropTypes.Requireable<string>;
+        onClick: PropTypes.Requireable<(...args: any[]) => any>;
+        menuButtonProps: PropTypes.Requireable<object>;
+    };
+    var defaultProps: {
+        size: string;
+        color: string;
+        menu: never[];
+        children: null;
+        variant: string;
+        onClick: (...args: any[]) => void;
+        menuButtonProps: {};
+    };
+    var Item: import("@mui/material").ExtendButtonBase<import("@mui/material/MenuItem").MenuItemTypeMap<{}, "li">>;
+}
+export default SplitButton;

package/lib/SplitButton/index.js

@@ -11,25 +11,6 @@ import ButtonGroup from '@mui/material/ButtonGroup';
 import Button from '@mui/material/Button';
 import noop from 'lodash/noop';
 import { styled } from '../Theme';
-
-/**
- * @typedef {import('@mui/material').MenuItem} MenuItem
- * @typedef {import('@mui/material').MenuItemProps} MenuItemProps
- * SplitButton 组件 Props
- * @typedef {{
- *  menu?: React.ReactElement<MenuItemProps, MenuItem>[] | React.ReactElement<MenuItemProps, MenuItem>;
- *  children?: JSX.Element | (() => JSX.Element);
- *  onClick?: () => void;
- *  menuButtonProps?: import('@mui/material').ButtonProps;
- * } & import('@mui/material').ButtonGroupProps } SplitButtonProps
- */
-
-/**
- * @description SplitButton allows the user to execute a default action which is bound to a Button or to choose a predefined action from a drop-down list.
- * @export
- * @param {SplitButtonProps} props
- * @return {JSX.Element}
- */
 export default function SplitButton(props) {
   const {
     size,
@@ -46,8 +27,7 @@ export default function SplitButton(props) {
   const menuItems = Array.isArray(menu) ? menu.map((item, index) => /*#__PURE__*/isValidElement(item) ? item : /*#__PURE__*/_createElement(MenuItem, {
     ...item,
     key: index
-  })) // eslint-disable-line react/no-array-index-key
-  : menu;
+  })) : menu;
   const onToggle = () => {
     setOpen(prevOpen => !prevOpen);
   };
@@ -118,10 +98,6 @@ SplitButton.defaultProps = {
   onClick: noop,
   menuButtonProps: {}
 };
-
-/**
- * @type {MenuItem}
- */
 SplitButton.Item = MenuItem;
 const StyledButtonGroup = styled(ButtonGroup)`
   > .MuiButtonBase-root:last-of-type {

package/lib/Switch/index.d.ts

@@ -24,7 +24,7 @@ declare namespace Switch {
         let labelProps: PropTypes.Requireable<object>;
     }
     namespace defaultProps {
-        let labelProps_1: any;
+        let labelProps_1: null;
         export { labelProps_1 as labelProps };
     }
 }

package/lib/Theme/theme-provider.d.ts

@@ -5,7 +5,7 @@ declare function ThemeProvider({ children, theme, injectFirst }: {
     children: any;
     theme: any;
     injectFirst: any;
-}): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+}): import("react/jsx-runtime").JSX.Element;
 declare namespace ThemeProvider {
     namespace propTypes {
         let children: PropTypes.Requireable<any>;
@@ -13,7 +13,7 @@ declare namespace ThemeProvider {
         let injectFirst: PropTypes.Requireable<boolean>;
     }
     namespace defaultProps {
-        let children_1: any;
+        let children_1: null;
         export { children_1 as children };
         export { defaultTheme as theme };
         let injectFirst_1: boolean;

package/lib/Toast/index.d.ts

@@ -8,4 +8,4 @@ export default _default;
 export type EnqueueSnackbarFunc = (message: import("notistack").SnackbarMessage, options?: import("notistack").OptionsObject, ...args: any[]) => import("notistack").SnackbarKey;
 export function ToastProvider({ children }: {
     children: any;
-}): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+}): import("react/jsx-runtime").JSX.Element;

package/lib/Util/deprecate.d.ts

@@ -2,4 +2,4 @@ export function warn(name: any, alternative: any): void;
 export function withDeprecated(Component: any, { name, alternative }: {
     name: any;
     alternative: any;
-}): (props: any) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+}): (props: any) => import("react/jsx-runtime").JSX.Element;

package/lib/Util/index.d.ts

@@ -51,8 +51,8 @@ export function formatToDatetime(date: string, { locale, tz }?: {
 export function detectWalletExtension(): any;
 export function openWebWallet({ webWalletUrl, action, locale, url, windowFeatures }: {
     webWalletUrl: any;
-    action?: string;
-    locale?: string;
+    action?: string | undefined;
+    locale?: string | undefined;
     url: any;
     windowFeatures: any;
 }): void;
@@ -72,10 +72,10 @@ export function appendParams(url: string, params: {
 export function getUserAvatar(avatar: any, size?: number): any;
 export function sleep(time?: number): Promise<any>;
 export function isUrl(str: any): boolean;
-export function getVisitorId(): string;
+export function getVisitorId(): string | null;
 export function setVisitorId(value: any): void;
 export function getDIDColor(did: any): any;
-export function getTranslation(translations: any | string, locale: string, { fallbackLocale, defaultValue }?: {
-    fallbackLocale?: string;
-    defaultValue?: string;
+export function getTranslation(translations: Object | string, locale: string, { fallbackLocale, defaultValue }?: {
+    fallbackLocale?: string | undefined;
+    defaultValue?: string | undefined;
 }): string;

package/lib/Util/passport.js

@@ -23,7 +23,6 @@ export const createPassportSvg = ({
   issuerDid = '',
   issuerAvatarUrl = '',
   ownerDid = '',
-  ownerName = '',
   ownerAvatarUrl = '',
   preferredColor = 'default',
   revoked = false,
@@ -39,7 +38,7 @@ export const createPassportSvg = ({
     tagVariant: revoked ? 'error' : 'info',
     color,
     did: ownerDid,
-    variant: 'app-passport' || ownerName,
+    variant: 'app-passport',
     verifiable: true,
     issuer: {
       name: issuer,
@@ -59,4 +58,47 @@ export const createPassportSvg = ({
     return `data:image/svg+xml;utf8,${encodeURIComponent(svgXML)}`;
   }
   return svgXML;
+};
+export const createKycSvg = ({
+  issuer = '',
+  title = '',
+  issuerDid = '',
+  issuerAvatarUrl = '',
+  ownerDid = '',
+  ownerName = '',
+  ownerAvatarUrl = '',
+  preferredColor = 'default',
+  type = 'email',
+  revoked = false,
+  isDataUrl = false,
+  width = '100%',
+  height = '100%'
+}) => {
+  const color = getPassportColor(preferredColor, issuerDid);
+  const svgXML = getSvg({
+    width,
+    height,
+    tag: revoked ? 'revoked' : '',
+    tagVariant: revoked ? 'error' : 'info',
+    color,
+    did: ownerDid,
+    variant: 'app-kyc',
+    verifiable: true,
+    issuer: {
+      name: issuer,
+      icon: issuerAvatarUrl
+    },
+    header: {
+      name: ownerName,
+      icon: ownerAvatarUrl
+    },
+    extra: {
+      key: type,
+      value: title
+    }
+  });
+  if (isDataUrl) {
+    return `data:image/svg+xml;utf8,${encodeURIComponent(svgXML)}`;
+  }
+  return svgXML;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.10.30",
+  "version": "2.10.32",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -17,13 +17,13 @@
     "url": "git+https://github.com/ArcBlock/ux.git"
   },
   "scripts": {
-    "lint": "eslint src tests --ext js --ext jsx",
+    "lint": "eslint src tests --ext js --ext jsx && tsc --noEmit --emitDeclarationOnly false",
     "lint:fix": "npm run lint -- --fix",
-    "build": "npm run build:clean && npm run build:lib && npm run build:types",
+    "build": "npm run build:clean && npm run build:babel && npm run build:types",
     "build:clean": "rm -rf lib",
-    "build:lib": "babel --config-file ./babel.config.es.js src --out-dir lib --copy-files --no-copy-ignored",
-    "build:types": "tsc",
-    "watch": "babel --config-file ./babel.config.es.js src --out-dir lib -w --copy-files --no-copy-ignored",
+    "build:babel": "babel --config-file ./babel.config.es.js src --out-dir lib --extensions \".js,.jsx,.ts,.tsx\" --copy-files --no-copy-ignored",
+    "build:types": "tsc && copyfiles -u 1 'src/**/*.d.ts' lib/",
+    "watch": "babel --config-file ./babel.config.es.js src --out-dir lib -w --extensions \".js,.jsx,.ts,.tsx\" --copy-files --no-copy-ignored",
     "precommit": "CI=1 npm run lint",
     "prepush": "CI=1 npm run lint",
     "prepublish": "npm run build",
@@ -42,8 +42,10 @@
     "@babel/plugin-proposal-class-properties": "^7.18.6",
     "@babel/preset-env": "^7.19.3",
     "@babel/preset-react": "^7.18.6",
+    "@babel/preset-typescript": "^7.24.7",
     "@types/react": "^18.3.4",
     "babel-plugin-inline-react-svg": "^1.1.2",
+    "copyfiles": "^2.4.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "glob": "^10.3.3",
     "jest": "^28.1.3",
@@ -59,12 +61,12 @@
     "react": ">=18.2.0",
     "react-router-dom": ">=6.22.3"
   },
-  "gitHead": "fc513c9d7b90fecd65844cc562b41f3c5dd5f398",
+  "gitHead": "0da245771d21b08f036d4c8f872b61995538c411",
   "dependencies": {
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.10.30",
-    "@arcblock/nft-display": "^2.10.30",
-    "@arcblock/react-hooks": "^2.10.30",
+    "@arcblock/icons": "^2.10.32",
+    "@arcblock/nft-display": "^2.10.32",
+    "@arcblock/react-hooks": "^2.10.32",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@fontsource/inter": "^5.0.16",
     "@fontsource/ubuntu-mono": "^5.0.18",

package/src/Datatable/index.jsx

@@ -24,15 +24,8 @@ import { styled } from '../Theme';
 /**
  * @typedef {{
  *  name: string,
- *  label: string,
  *  width?: number,
  *  align?: 'left' | 'center' | 'right',
- *  options?: {
- *    filter?: boolean,
- *    sort?: boolean,
- *    customBodyRender?: (value: any) => import('react').ReactElement,
- *    customBodyRenderLite?: (index: number) => import('react').ReactElement
- *  } & import('mui-datatables').MUIDataTableColumnOptions
  * } & import('mui-datatables').MUIDataTableColumnDef}  DataTableColumn
  */
 

package/src/Dialog/types.d.ts

@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react';
 
-export type OpenConfirmProps = {
+export interface OpenConfirmProps {
   title: ReactNode;
   content: ReactNode;
   onConfirm?: (close: () => void) => void;
@@ -8,7 +8,7 @@ export type OpenConfirmProps = {
   showCancelButton?: boolean;
   confirmButtonText?: string;
   cancelButtonText?: string;
-};
+}
 
 export type UpdateConfirmProps = Partial<Pick<OpenConfirmProps, 'title' | 'content'>>;
 

package/src/MuiWrap/index.tsx

@@ -0,0 +1,9 @@
+import { Box, BoxProps, Typography, TypographyProps } from '@mui/material';
+
+export function TBox<C extends React.ElementType>({ component, ...rest }: BoxProps<C, { component: C }>) {
+  return <Box component={component} {...rest} />;
+}
+
+export function TTypography<C extends React.ElementType>({ component, ...rest }: TypographyProps<C, { component: C }>) {
+  return <Typography component={component} {...rest} />;
+}

package/src/Passport/passport.jsx

@@ -19,13 +19,15 @@ export default function Passport({ passport, user, color, width, icon, children,
         // eslint-disable-next-line react/no-danger
         dangerouslySetInnerHTML={{
           __html: createPassportSvg({
-            title: passport.title || passport.name,
+            title: passport.scope === 'passport' ? passport.title : passport.name,
             issuer: passport.issuer && passport.issuer.name,
             issuerDid: passport.issuer && passport.issuer.id,
             ownerName: user.fullName,
             ownerDid: user.did,
             ownerAvatarUrl: user.avatar,
             revoked: passport.revoked,
+            scope: passport.scope,
+            role: passport.role,
             preferredColor: color,
             width,
           }),

package/src/SplitButton/{index.js → index.tsx}

@@ -5,54 +5,46 @@ import Popper from '@mui/material/Popper';
 import Paper from '@mui/material/Paper';
 import ClickAwayListener from '@mui/material/ClickAwayListener';
 import MenuList from '@mui/material/MenuList';
-import MenuItem from '@mui/material/MenuItem';
-import ButtonGroup from '@mui/material/ButtonGroup';
-import Button from '@mui/material/Button';
+import MenuItem, { MenuItemProps } from '@mui/material/MenuItem';
+import ButtonGroup, { ButtonGroupProps } from '@mui/material/ButtonGroup';
+import Button, { ButtonProps } from '@mui/material/Button';
 import noop from 'lodash/noop';
 
 import { styled } from '../Theme';
 
-/**
- * @typedef {import('@mui/material').MenuItem} MenuItem
- * @typedef {import('@mui/material').MenuItemProps} MenuItemProps
- * SplitButton 组件 Props
- * @typedef {{
- *  menu?: React.ReactElement<MenuItemProps, MenuItem>[] | React.ReactElement<MenuItemProps, MenuItem>;
- *  children?: JSX.Element | (() => JSX.Element);
- *  onClick?: () => void;
- *  menuButtonProps?: import('@mui/material').ButtonProps;
- * } & import('@mui/material').ButtonGroupProps } SplitButtonProps
- */
+export interface SplitButtonProps extends Omit<ButtonGroupProps, 'children'> {
+  menu?:
+    | React.ReactElement<MenuItemProps, typeof MenuItem>
+    | React.ReactElement<MenuItemProps, typeof MenuItem>[]
+    | MenuItemProps[];
+  children?: JSX.Element | (() => JSX.Element);
+  onClick?: () => void;
+  menuButtonProps?: ButtonProps;
+}
 
-/**
- * @description SplitButton allows the user to execute a default action which is bound to a Button or to choose a predefined action from a drop-down list.
- * @export
- * @param {SplitButtonProps} props
- * @return {JSX.Element}
- */
-export default function SplitButton(props) {
+export default function SplitButton(props: SplitButtonProps) {
   const { size, color, menu, children, variant, onClick, menuButtonProps, ...rest } = props;
 
   const [open, setOpen] = useState(false);
-  const anchorRef = useRef(null);
+  const anchorRef = useRef<HTMLDivElement | null>(null);
   const menuItems = Array.isArray(menu)
-    ? menu.map((item, index) => (isValidElement(item) ? item : <MenuItem {...item} key={index} />)) // eslint-disable-line react/no-array-index-key
+    ? menu.map((item, index) => (isValidElement(item) ? item : <MenuItem {...item} key={index} />))
     : menu;
 
   const onToggle = () => {
     setOpen((prevOpen) => !prevOpen);
   };
 
-  const handleClose = (e) => {
-    if (anchorRef.current && anchorRef.current.contains(e.target)) {
+  const handleClose = (e: MouseEvent | TouchEvent) => {
+    if (anchorRef.current && anchorRef.current.contains(e.target as HTMLElement)) {
       return;
     }
     setOpen(false);
   };
 
   // 点击 item 后收起下拉菜单, 如果想要点击 action 后不收起下拉菜单, 可以在 item#onClick 时调用 e.stopPropagation()
-  const handleItemClick = (e) => {
-    if (e.target.closest('.MuiMenuItem-root')) {
+  const handleItemClick: React.MouseEventHandler<HTMLUListElement> = (e) => {
+    if ((e.target as HTMLElement).closest('.MuiMenuItem-root')) {
       setOpen(false);
     }
   };
@@ -103,9 +95,6 @@ SplitButton.defaultProps = {
   menuButtonProps: {},
 };
 
-/**
- * @type {MenuItem}
- */
 SplitButton.Item = MenuItem;
 
 const StyledButtonGroup = styled(ButtonGroup)`

package/src/Util/passport.js

@@ -27,7 +27,6 @@ export const createPassportSvg = ({
   issuerDid = '',
   issuerAvatarUrl = '',
   ownerDid = '',
-  ownerName = '',
   ownerAvatarUrl = '',
   preferredColor = 'default',
   revoked = false,
@@ -47,7 +46,7 @@ export const createPassportSvg = ({
     color,
 
     did: ownerDid,
-    variant: 'app-passport' || ownerName,
+    variant: 'app-passport',
     verifiable: true,
 
     issuer: {
@@ -73,3 +72,56 @@ export const createPassportSvg = ({
 
   return svgXML;
 };
+
+export const createKycSvg = ({
+  issuer = '',
+  title = '',
+  issuerDid = '',
+  issuerAvatarUrl = '',
+  ownerDid = '',
+  ownerName = '',
+  ownerAvatarUrl = '',
+  preferredColor = 'default',
+  type = 'email',
+  revoked = false,
+  isDataUrl = false,
+  width = '100%',
+  height = '100%',
+}) => {
+  const color = getPassportColor(preferredColor, issuerDid);
+
+  const svgXML = getSvg({
+    width,
+    height,
+
+    tag: revoked ? 'revoked' : '',
+    tagVariant: revoked ? 'error' : 'info',
+
+    color,
+
+    did: ownerDid,
+    variant: 'app-kyc',
+    verifiable: true,
+
+    issuer: {
+      name: issuer,
+      icon: issuerAvatarUrl,
+    },
+
+    header: {
+      name: ownerName,
+      icon: ownerAvatarUrl,
+    },
+
+    extra: {
+      key: type,
+      value: title,
+    },
+  });
+
+  if (isDataUrl) {
+    return `data:image/svg+xml;utf8,${encodeURIComponent(svgXML)}`;
+  }
+
+  return svgXML;
+};