@arcblock/ux 2.10.28 → 2.10.30

package/lib/Avatar/index.d.ts

@@ -1,4 +1,8 @@
-declare function AvatarWithErrorBoundary(props: any): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+/**
+ * @param {AvatarProps} props
+ * @returns {JSX.Element}
+ */
+declare function AvatarWithErrorBoundary(props: AvatarProps): JSX.Element;
 declare namespace AvatarWithErrorBoundary {
     import propTypes = Avatar.propTypes;
     export { propTypes };
@@ -8,28 +12,27 @@ export default AvatarWithErrorBoundary;
  * Avatar component
  */
 export type AvatarProps = {
-    did: string;
+    did?: string;
     size?: number;
     variant?: "circle" | "rounded" | "default";
     animation?: boolean;
     shape?: "" | "rectangle" | "square" | "hexagon" | "circle";
-    src?: string;
+    blockiesPadding?: boolean;
     responsive?: boolean;
-};
+} & Omit<import("../Img").ImgProps, "size">;
 /**
  * Avatar component
  * @typedef {{
- *  did: string;
+ *  did?: string;
  *  size?: number;
  *  variant?: 'circle' | 'rounded' | 'default';
  *  animation?: boolean;
  *  shape?: '' | 'rectangle' | 'square' | 'hexagon' | 'circle';
- *  src?: string;
+ *  blockiesPadding?: boolean;
  *  responsive?: boolean;
- * }} AvatarProps
+ * } & Omit<import('../Img').ImgProps, 'size'>} AvatarProps
  */
 /**
- * Avatar component
  * @see 参考: https://github.com/blocklet/block-explorer/issues/478#issuecomment-1038954976
  * @param {AvatarProps} props
  * @returns {JSX.Element}
@@ -37,7 +40,7 @@ export type AvatarProps = {
 declare function Avatar(props: AvatarProps): JSX.Element;
 declare namespace Avatar {
     export namespace propTypes_1 {
-        let did: PropTypes.Validator<string>;
+        let did: PropTypes.Requireable<string>;
         let size: PropTypes.Requireable<number>;
         let variant: PropTypes.Requireable<string>;
         let animation: PropTypes.Requireable<boolean>;
@@ -47,16 +50,18 @@ declare namespace Avatar {
     }
     export { propTypes_1 as propTypes };
     export namespace defaultProps {
+        let did_1: string;
+        export { did_1 as did };
         let size_1: number;
         export { size_1 as size };
         let variant_1: string;
         export { variant_1 as variant };
         let animation_1: boolean;
         export { animation_1 as animation };
-        let blockiesPadding_1: boolean;
-        export { blockiesPadding_1 as blockiesPadding };
         let shape_1: string;
         export { shape_1 as shape };
+        let blockiesPadding_1: boolean;
+        export { blockiesPadding_1 as blockiesPadding };
         let responsive_1: boolean;
         export { responsive_1 as responsive };
     }

package/lib/Avatar/index.js

@@ -14,18 +14,17 @@ import { DID_PREFIX } from '../Util/constant';
 /**
  * Avatar component
  * @typedef {{
- *  did: string;
+ *  did?: string;
  *  size?: number;
  *  variant?: 'circle' | 'rounded' | 'default';
  *  animation?: boolean;
  *  shape?: '' | 'rectangle' | 'square' | 'hexagon' | 'circle';
- *  src?: string;
+ *  blockiesPadding?: boolean;
  *  responsive?: boolean;
- * }} AvatarProps
+ * } & Omit<import('../Img').ImgProps, 'size'>} AvatarProps
  */
 
 /**
- * Avatar component
  * @see 参考: https://github.com/blocklet/block-explorer/issues/478#issuecomment-1038954976
  * @param {AvatarProps} props
  * @returns {JSX.Element}
@@ -138,7 +137,7 @@ function Avatar(props) {
   throw new Error(`Invalid DID: ${did}`);
 }
 Avatar.propTypes = {
-  did: PropTypes.string.isRequired,
+  did: PropTypes.string,
   size: PropTypes.number,
   variant: PropTypes.oneOf(['circle', 'rounded', 'default']),
   // animation 仅对 did motif 有效
@@ -149,13 +148,19 @@ Avatar.propTypes = {
   responsive: PropTypes.bool
 };
 Avatar.defaultProps = {
+  did: '',
   size: 36,
   variant: 'default',
   animation: false,
-  blockiesPadding: true,
   shape: '',
+  blockiesPadding: true,
   responsive: false
 };
+
+/**
+ * @param {AvatarProps} props
+ * @returns {JSX.Element}
+ */
 export default function AvatarWithErrorBoundary(props) {
   const size = props.size || 36;
   const borderRadius = {

package/lib/Datatable/index.d.ts

@@ -15,6 +15,7 @@ export type DataTableColumn = {
     name: string;
     label: string;
     width?: number;
+    align?: "left" | "center" | "right";
     options?: {
         filter?: boolean;
         sort?: boolean;
@@ -24,20 +25,15 @@ export type DataTableColumn = {
 } & import("mui-datatables").MUIDataTableColumnDef;
 export type DataTableState = Pick<import("mui-datatables").MUIDataTableState, "count" | "page" | "rowsPerPage" | "searchText" | "sortOrder" | "filterList">;
 export type ModifiedMUIDataTableProps = {
-    /**
-     * - The title of the table (optional).
-     */
     title?: string;
-    /**
-     * - Other props from MUIDataTableProps.
-     */
-    rest?: import("mui-datatables").MUIDataTableProps[];
-};
+} & Omit<import("mui-datatables").MUIDataTableProps, "title">;
 export type DataTableProps = {
     data: Array<object | number[] | string[]>;
     columns: Array<DataTableColumn>;
     locale?: string;
-    options?: import("mui-datatables").MUIDataTableOptions;
+    options?: {
+        searchDebounceTime?: number;
+    } & import("mui-datatables").MUIDataTableOptions;
     style?: import("react").CSSProperties;
     customButtons?: Array<DataTableCustomButton>;
     onChange?: (state: DataTableState, action: string) => void | Promise<void>;
@@ -46,7 +42,7 @@ export type DataTableProps = {
     stripped?: boolean;
     verticalKeyWidth?: number | string;
     hideTableHeader?: boolean;
-    components?: import("react").ReactElement;
+    components?: ModifiedMUIDataTableProps["components"];
     emptyNode?: import("react").ReactNode;
     durable?: string;
     durableKeys?: "page" | "rowsPerPage" | "searchText" | "sortOrder";

package/lib/Datatable/index.js

@@ -27,6 +27,7 @@ import { styled } from '../Theme';
  *  name: string,
  *  label: string,
  *  width?: number,
+ *  align?: 'left' | 'center' | 'right',
  *  options?: {
  *    filter?: boolean,
  *    sort?: boolean,
@@ -41,9 +42,9 @@ import { styled } from '../Theme';
  */
 
 /**
- * @typedef {Object} ModifiedMUIDataTableProps
- * @property {string} [title] - The title of the table (optional).
- * @property {...import('mui-datatables').MUIDataTableProps} [rest] - Other props from MUIDataTableProps.
+ * @typedef {{
+ *  title?: string, // The title of the table (optional)
+ * } & Omit<import('mui-datatables').MUIDataTableProps, 'title'>} ModifiedMUIDataTableProps
  */
 
 /**
@@ -51,7 +52,7 @@ import { styled } from '../Theme';
  *  data: Array<object | number[] | string[]>,
  *  columns: Array<DataTableColumn>,
  *  locale?: string,
- *  options?: import('mui-datatables').MUIDataTableOptions,
+ *  options?: { searchDebounceTime?: number } & import('mui-datatables').MUIDataTableOptions,
  *  style?: import('react').CSSProperties,
  *  customButtons?: Array<DataTableCustomButton>,
  *  onChange?: (state: DataTableState, action: string) => void | Promise<void>,
@@ -60,7 +61,7 @@ import { styled } from '../Theme';
  *  stripped?: boolean,
  *  verticalKeyWidth?: number | string,
  *  hideTableHeader?: boolean,
- *  components?: import('react').ReactElement,
+ *  components?: ModifiedMUIDataTableProps['components'],
  *  emptyNode?: import('react').ReactNode,
  *  durable?: string,
  *  durableKeys?: 'page' | 'rowsPerPage' | 'searchText' | 'sortOrder'

package/lib/Dialog/dialog.d.ts

@@ -37,12 +37,16 @@ export type UxDialogProps = {
      * - Props to be passed down to the dialog paper.
      */
     PaperProps?: PaperStyle;
+    slotProps?: {
+        content: object;
+        content: object;
+    };
     /**
      * - Callback function fired when the dialog is closed.
      */
     onClose?: (event: React.SyntheticEvent, reason: string) => void;
 };
-export type DialogProps = MuiDialogProps & UxDialogProps;
+export type DialogProps = Omit<MuiDialogProps, "title" | "children" | "onClose" | "PaperProps" | "slotProps"> & UxDialogProps;
 /**
  * @typedef {import('@mui/material').DialogProps} MuiDialogProps
  * @typedef {import('@mui/material').PaperProps & {
@@ -60,10 +64,11 @@ export type DialogProps = MuiDialogProps & UxDialogProps;
   @property {boolean} [showCloseButton=true] - Whether or not to show the close button.
   @property {'left'|'center'|'right'} [actionsPosition='right'] - The position of the actions toolbar.
   @property {PaperStyle} [PaperProps] - Props to be passed down to the dialog paper.
+  @property {{content: object, content: object}} [slotProps]
   @property {(event: React.SyntheticEvent, reason: string) => void} [onClose] - Callback function fired when the dialog is closed.
 */
 /**
- * @typedef {MuiDialogProps & UxDialogProps} DialogProps
+ * @typedef {Omit<MuiDialogProps, 'title' | 'children' | 'onClose' | 'PaperProps' | 'slotProps'> & UxDialogProps} DialogProps
  */
 /**
  * Dialog
@@ -92,10 +97,9 @@ declare namespace Dialog {
             content: PropTypes.Requireable<object>;
             header: PropTypes.Requireable<object>;
         }>>;
+        let onClose: PropTypes.Requireable<(...args: any[]) => any>;
     }
     namespace defaultProps {
-        let showCloseButton_1: boolean;
-        export { showCloseButton_1 as showCloseButton };
         let title_1: string;
         export { title_1 as title };
         let prepend_1: any;
@@ -104,12 +108,16 @@ declare namespace Dialog {
         export { toolbar_1 as toolbar };
         let actions_1: any;
         export { actions_1 as actions };
+        let showCloseButton_1: boolean;
+        export { showCloseButton_1 as showCloseButton };
         let actionsPosition_1: string;
         export { actionsPosition_1 as actionsPosition };
         let PaperProps_1: {};
         export { PaperProps_1 as PaperProps };
         let slotProps_1: {};
         export { slotProps_1 as slotProps };
+        let onClose_1: any;
+        export { onClose_1 as onClose };
     }
 }
 import PropTypes from 'prop-types';

package/lib/Dialog/dialog.js

@@ -22,11 +22,12 @@ import { styled, useTheme } from '../Theme';
   @property {boolean} [showCloseButton=true] - Whether or not to show the close button.
   @property {'left'|'center'|'right'} [actionsPosition='right'] - The position of the actions toolbar.
   @property {PaperStyle} [PaperProps] - Props to be passed down to the dialog paper.
+  @property {{content: object, content: object}} [slotProps]
   @property {(event: React.SyntheticEvent, reason: string) => void} [onClose] - Callback function fired when the dialog is closed.
 */
 
 /**
- * @typedef {MuiDialogProps & UxDialogProps} DialogProps
+ * @typedef {Omit<MuiDialogProps, 'title' | 'children' | 'onClose' | 'PaperProps' | 'slotProps'> & UxDialogProps} DialogProps
  */
 
 /**
@@ -125,17 +126,19 @@ Dialog.propTypes = {
   slotProps: PropTypes.shape({
     content: PropTypes.object,
     header: PropTypes.object
-  })
+  }),
+  onClose: PropTypes.func
 };
 Dialog.defaultProps = {
-  showCloseButton: true,
   title: '',
   prepend: null,
   toolbar: null,
   actions: null,
+  showCloseButton: true,
   actionsPosition: 'right',
   PaperProps: {},
-  slotProps: {}
+  slotProps: {},
+  onClose: undefined
 };
 /**
  * @type {import('@emotion/styled').StyledComponent<import('@mui/material').DialogProps, {}, { ref?: React.Ref<any> | undefined;}>}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.10.28",
+  "version": "2.10.30",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -59,12 +59,12 @@
     "react": ">=18.2.0",
     "react-router-dom": ">=6.22.3"
   },
-  "gitHead": "71cb15e455bd2f3bdf906c14ae4ef87f9da9c271",
+  "gitHead": "fc513c9d7b90fecd65844cc562b41f3c5dd5f398",
   "dependencies": {
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.10.28",
-    "@arcblock/nft-display": "^2.10.28",
-    "@arcblock/react-hooks": "^2.10.28",
+    "@arcblock/icons": "^2.10.30",
+    "@arcblock/nft-display": "^2.10.30",
+    "@arcblock/react-hooks": "^2.10.30",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@fontsource/inter": "^5.0.16",
     "@fontsource/ubuntu-mono": "^5.0.18",

package/src/Avatar/index.jsx

@@ -13,18 +13,17 @@ import { DID_PREFIX } from '../Util/constant';
 /**
  * Avatar component
  * @typedef {{
- *  did: string;
+ *  did?: string;
  *  size?: number;
  *  variant?: 'circle' | 'rounded' | 'default';
  *  animation?: boolean;
  *  shape?: '' | 'rectangle' | 'square' | 'hexagon' | 'circle';
- *  src?: string;
+ *  blockiesPadding?: boolean;
  *  responsive?: boolean;
- * }} AvatarProps
+ * } & Omit<import('../Img').ImgProps, 'size'>} AvatarProps
  */
 
 /**
- * Avatar component
  * @see 参考: https://github.com/blocklet/block-explorer/issues/478#issuecomment-1038954976
  * @param {AvatarProps} props
  * @returns {JSX.Element}
@@ -125,7 +124,7 @@ function Avatar(props) {
 }
 
 Avatar.propTypes = {
-  did: PropTypes.string.isRequired,
+  did: PropTypes.string,
   size: PropTypes.number,
   variant: PropTypes.oneOf(['circle', 'rounded', 'default']),
   // animation 仅对 did motif 有效
@@ -137,14 +136,19 @@ Avatar.propTypes = {
 };
 
 Avatar.defaultProps = {
+  did: '',
   size: 36,
   variant: 'default',
   animation: false,
-  blockiesPadding: true,
   shape: '',
+  blockiesPadding: true,
   responsive: false,
 };
 
+/**
+ * @param {AvatarProps} props
+ * @returns {JSX.Element}
+ */
 export default function AvatarWithErrorBoundary(props) {
   const size = props.size || 36;
   const borderRadius = { rounded: '4px', circle: '100%' }[props.variant] || 0;

package/src/Datatable/index.jsx

@@ -26,6 +26,7 @@ import { styled } from '../Theme';
  *  name: string,
  *  label: string,
  *  width?: number,
+ *  align?: 'left' | 'center' | 'right',
  *  options?: {
  *    filter?: boolean,
  *    sort?: boolean,
@@ -40,9 +41,9 @@ import { styled } from '../Theme';
  */
 
 /**
- * @typedef {Object} ModifiedMUIDataTableProps
- * @property {string} [title] - The title of the table (optional).
- * @property {...import('mui-datatables').MUIDataTableProps} [rest] - Other props from MUIDataTableProps.
+ * @typedef {{
+ *  title?: string, // The title of the table (optional)
+ * } & Omit<import('mui-datatables').MUIDataTableProps, 'title'>} ModifiedMUIDataTableProps
  */
 
 /**
@@ -50,7 +51,7 @@ import { styled } from '../Theme';
  *  data: Array<object | number[] | string[]>,
  *  columns: Array<DataTableColumn>,
  *  locale?: string,
- *  options?: import('mui-datatables').MUIDataTableOptions,
+ *  options?: { searchDebounceTime?: number } & import('mui-datatables').MUIDataTableOptions,
  *  style?: import('react').CSSProperties,
  *  customButtons?: Array<DataTableCustomButton>,
  *  onChange?: (state: DataTableState, action: string) => void | Promise<void>,
@@ -59,7 +60,7 @@ import { styled } from '../Theme';
  *  stripped?: boolean,
  *  verticalKeyWidth?: number | string,
  *  hideTableHeader?: boolean,
- *  components?: import('react').ReactElement,
+ *  components?: ModifiedMUIDataTableProps['components'],
  *  emptyNode?: import('react').ReactNode,
  *  durable?: string,
  *  durableKeys?: 'page' | 'rowsPerPage' | 'searchText' | 'sortOrder'

package/src/Dialog/dialog.jsx

@@ -30,11 +30,12 @@ import { styled, useTheme } from '../Theme';
   @property {boolean} [showCloseButton=true] - Whether or not to show the close button.
   @property {'left'|'center'|'right'} [actionsPosition='right'] - The position of the actions toolbar.
   @property {PaperStyle} [PaperProps] - Props to be passed down to the dialog paper.
+  @property {{content: object, content: object}} [slotProps]
   @property {(event: React.SyntheticEvent, reason: string) => void} [onClose] - Callback function fired when the dialog is closed.
 */
 
 /**
- * @typedef {MuiDialogProps & UxDialogProps} DialogProps
+ * @typedef {Omit<MuiDialogProps, 'title' | 'children' | 'onClose' | 'PaperProps' | 'slotProps'> & UxDialogProps} DialogProps
  */
 
 /**
@@ -128,17 +129,19 @@ Dialog.propTypes = {
     content: PropTypes.object,
     header: PropTypes.object,
   }),
+  onClose: PropTypes.func,
 };
 
 Dialog.defaultProps = {
-  showCloseButton: true,
   title: '',
   prepend: null,
   toolbar: null,
   actions: null,
+  showCloseButton: true,
   actionsPosition: 'right',
   PaperProps: {},
   slotProps: {},
+  onClose: undefined,
 };
 /**
  * @type {import('@emotion/styled').StyledComponent<import('@mui/material').DialogProps, {}, { ref?: React.Ref<any> | undefined;}>}