@arcblock/ux 2.5.46 → 2.5.48

package/lib/ActionButton/index.js

@@ -29,7 +29,30 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
+/**
+ * Action button component
+ * @typedef {{
+ *  href: string;
+ *  children?: import('react').ReactNode;
+ *  gradient?: string;
+ *  color?: string;
+ *  icon?: string;
+ *  border?: string;
+ *  text?: string;
+ *  theme?: string;
+ *  variant?: string;
+ *  size?: string;
+ *  width?: string;
+ * }} ActionButtonProps
+ */
+
+/**
+ * Action button component
+ * @param {ActionButtonProps} props
+ * @returns {JSX.Element}
+ */
 function ActionButton(props) {
+  /** @type {ActionButtonProps & {}} */
   const newProps = (0, _Util.mergeProps)(props, ActionButton);
 
   const {
@@ -44,6 +67,8 @@ function ActionButton(props) {
     text
   } = newProps,
         rest = _objectWithoutProperties(newProps, _excluded);
+  /** @type {import('react').CSSProperties} */
+
 
   const styles = {};
 

package/lib/ActivityIndicator/index.js

@@ -40,6 +40,16 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 /**
  * ActivityIndicator is used when we want to tell the user the request they made on the UI will take time.
+ * @typedef {{
+ *  interval?: number;
+ *  messages: string[];
+ * } & import('react').ComponentPropsWithoutRef<"div"> } ActivityIndicatorProps
+ */
+
+/**
+ * @description ActivityIndicator is used when we want to tell the user the request they made on the UI will take time.
+ * @param {ActivityIndicatorProps} props
+ * @returns {JSX.Element}
  */
 function ActivityIndicator(_ref) {
   let {

package/lib/Alert/index.js

@@ -67,8 +67,25 @@ const types = {
     backgroundColor: '#EEEEEE'
   }
 };
+/**
+ * Alert notification component
+ * @typedef {{
+ *  type?: 'error' | 'warning' | 'success' | 'tip';
+ *  children: any;
+ *  className?: string;
+ *  style?: object | string;
+ *  variant?: 'border' | 'icon';
+ * } & import('react').ComponentPropsWithoutRef<"div"> } AlertProps
+ */
+
+/**
+ * Alert notification component
+ * @param {AlertProps} props
+ * @returns {JSX.Element}
+ */
 
 function Alert(props) {
+  /** @type {AlertProps} */
   const newProps = (0, _Util.mergeProps)(props, Alert, ['style']);
 
   const {
@@ -86,6 +103,8 @@ function Alert(props) {
     backgroundColor,
     borderColor
   } = types[type] || types.success;
+  /** @type {import('react').CSSProperties} */
+
   const styles = Object.assign({
     color: _colors.blueGrey[500],
     backgroundColor: variant === 'border' ? backgroundColor : 'transparent',

package/lib/Avatar/index.js

@@ -54,7 +54,26 @@ const isEthereumDid = did => {
   }
 
   return true;
-}; // 参考: https://github.com/blocklet/block-explorer/issues/478#issuecomment-1038954976
+};
+/**
+ * Avatar component
+ * @typedef {{
+ *  did: string;
+ *  size?: number;
+ *  variant?: 'circle' | 'rounded' | 'default';
+ *  animation?: boolean;
+ *  shape?: '' | 'rectangle' | 'square' | 'hexagon' | 'circle';
+ *  src?: string;
+ *  responsive?: boolean;
+ * }} AvatarProps
+ */
+
+/**
+ * Avatar component
+ * @see 参考: https://github.com/blocklet/block-explorer/issues/478#issuecomment-1038954976
+ * @param {AvatarProps} props
+ * @returns {JSX.Element}
+ */
 
 
 function Avatar(props) {
@@ -134,13 +153,15 @@ Avatar.propTypes = {
   // animation 仅对 did motif 有效
   animation: _propTypes.default.bool,
   // shape 仅对 did motif 有效, 明确指定 motif shape, 而非由 did role type 自动推断 shape
-  shape: _propTypes.default.oneOf(['', 'rectangle', 'square', 'hexagon', 'circle'])
+  shape: _propTypes.default.oneOf(['', 'rectangle', 'square', 'hexagon', 'circle']),
+  responsive: _propTypes.default.bool
 };
 Avatar.defaultProps = {
   size: 36,
   variant: 'default',
   animation: false,
-  shape: ''
+  shape: '',
+  responsive: false
 };
 const BlockyIconContainer = (0, _Theme.styled)('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  width: ", "px;\n  height: ", "px;\n  .blocky-icon-inner {\n    box-sizing: border-box;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    width: ", "px;\n    height: ", "px;\n    border-radius: ", "px;\n    background: #ddd;\n  }\n"])), props => props.$size, props => props.$size, props => props.$size, props => props.$size * 0.7, props => Math.min(10, Math.floor(0.1 * props.$size + 2)));
 const StyledImg = (0, _Theme.styled)(_Img.default)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  &.avatar-img--rounded {\n    border-radius: 4px;\n    overflow: hidden;\n  }\n  &.avatar-img--circle {\n    border-radius: 100%;\n    overflow: hidden;\n  }\n"])));

package/lib/Badge/index.js

@@ -61,6 +61,22 @@ const types = {
     backgroundColor: _Colors.default.grey[900]
   }
 };
+/**
+ * Badge component to display notification badge
+ * @typedef {{
+ *   children: import('react').ReactNode;
+ *   content?: string;
+ *   type?: 'error' | 'warning' | 'success' | 'primary' | 'reverse';
+ *   className?: string;
+ *   style?: object | string;
+ * } & import('@mui/material').TypographyProps } BadgeProps
+ */
+
+/**
+ * Badge notification component
+ * @param {BadgeProps} props
+ * @returns {JSX.Element}
+ */
 
 function Badge(props) {
   const newProps = (0, _Util.mergeProps)(props, Badge, ['style']);

package/lib/Blocklet/blocklet.js

@@ -46,6 +46,29 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
 const Div = (0, _Theme.styled)('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  &.arcblock-blocklet {\n    padding: ", " ", " 0\n      ", ";\n  }\n  .arcblock-blocklet__content {\n    cursor: pointer;\n    display: flex;\n    ", " {\n      align-items: center;\n    }\n  }\n  .arcblock-blocklet__cover {\n    width: 64px;\n    height: 64px;\n    margin-right: ", ";\n    overflow: hidden;\n    border-radius: 12px;\n    /* see: https://stackoverflow.com/questions/49066011/overflow-hidden-with-border-radius-not-working-on-safari */\n    transform: translateZ(0);\n    ", " {\n      width: 80px;\n      height: 80px;\n      margin-bottom: 12px;\n    }\n  }\n  .arcblock-blocklet__button--hover {\n    &:not(.Mui-disabled) {\n      position: relative;\n      z-index: 1;\n      &::before {\n        content: '';\n        position: absolute;\n        height: 100%;\n        width: 100%;\n        left: 0;\n        top: 0;\n        transition: opacity 0.3s;\n      }\n      &:hover::before {\n        opacity: 0;\n      }\n      &::after {\n        content: '';\n        position: absolute;\n        height: 100%;\n        width: 100%;\n        background-color: ", ";\n        transform: scale(0.1);\n        opacity: 0;\n        z-index: -1;\n        transition: transform 0.3s, opacity 0.3s, background-color 0.3s;\n      }\n      &:hover::after {\n        opacity: 1;\n        transform-origin: center;\n        transform: scale(1);\n      }\n    }\n\n    &:not(.Mui-disabled) {\n      background-color: transparent !important;\n      color: ", ";\n    }\n    &:not(.Mui-disabled) {\n      &:hover {\n        color: ", ";\n      }\n    }\n  }\n  .arcblock-blocklet__info {\n    flex: 1;\n    overflow: hidden;\n    border-bottom: 1px solid ", ";\n    padding-bottom: ", ";\n  }\n  .arcblock-blocklet__text {\n    height: 57px;\n    overflow: hidden;\n  }\n  /* \u8BBE\u7F6E\u591A\u884C\u6587\u672C\u6EA2\u51FA\u663E\u793A\u7701\u7565\u53F7 \u517C\u5BB9fireFox\u3001safari */\n  .arcblock-blocklet__title {\n    margin: 0;\n    font-size: 16px;\n    font-weight: 500;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n  .arcblock-blocklet__describe {\n    margin-top: ", ";\n    color: ", ";\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 17px;\n    max-height: 34px;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    word-break: break-word;\n  }\n  .arcblock-blocklet__version {\n    color: ", ";\n    font-size: 12px;\n  }\n"])), props => props.theme.spacing(2), props => props.theme.spacing(2), props => props.theme.spacing(2), props => props.theme.breakpoints.up('sm'), props => props.theme.spacing(2), props => props.theme.breakpoints.up('sm'), props => props.theme.palette.primary.main, props => props.theme.palette.primary.main, props => props.theme.palette.common.white, props => props.theme.palette.divider, props => props.theme.spacing(2), props => props.theme.spacing(0.5), props => props.theme.palette.grey[600], props => props.theme.palette.grey[600]);
+/**
+ * BlockletStore component
+ * @typedef {{
+ *  title?: string | JSX.Element;
+ *  did?: string;
+ *  description?: string | JSX.Element;
+ *  cover?: string;
+ *  version?: string;
+ *  buttonText?: string;
+ *  buttonDisabled?: boolean;
+ *  buttonLoading?: boolean;
+ *  button?: JSX.Element;
+ *  onButtonClick?: Function;
+ *  onMainClick?: Function;
+ *  className?: string;
+ * } & import('react').ComponentPropsWithoutRef<"div"> } BlockletStoreProps
+ */
+
+/**
+ * BlockletStore component
+ * @param {BlockletStoreProps} props
+ * @returns {JSX.Element}
+ */
 
 function BlockletStore(_ref) {
   let {

package/lib/BlockletNFT/index.js

@@ -86,6 +86,33 @@ function BlockletIcon(_ref) {
 BlockletIcon.propTypes = {
   name: _propTypes.default.string.isRequired
 };
+/**
+ * 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}
+ */
 
 function BlockletNFT(_ref2) {
   let {

package/lib/Dialog/confirm.js

@@ -27,7 +27,25 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
+/**
+  @typedef {Object} ConfirmProps
+  @property {boolean} open
+  @property {React.ReactNode} title
+  @property {React.ReactNode} children
+  @property {() => void | Promise<void>} onConfirm
+  @property {() => void | Promise<void>} onCancel
+  @property {boolean} [showCancelButton=true]
+  @property {{text: string, props?: import('../Button/wrap').ButtonProps}} [confirmButton={text: 'Confirm'}]
+  @property {{text: string, props?: import('../Button/wrap').ButtonProps}} [cancelButton={text: 'Cancel'}]
+  @property {import('@mui/material').PaperProps} [PaperProps={}] 
+*/
 // 注意排在 {...rest} 之后的 props 优先级更高
+
+/**
+ *
+ * @param {ConfirmProps} props
+ * @returns {import('react').ReactComponentElement}
+ */
 function Confirm(_ref) {
   let {
     title,

package/lib/Dialog/dialog.js

@@ -41,6 +41,26 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
+/**
+  @typedef {import('@mui/material').PaperProps & {
+    minWidth: number | string,
+    minHeight: number | string,
+  }} PaperStyle
+*/
+
+/**
+  @typedef {Object} DialogProps
+  @property {React.ReactNode} children - The content of the dialog.
+  @property {React.ReactNode} [title] - The title of the dialog.
+  @property {React.ReactNode} [prepend] - Content to be displayed before the dialog title.
+  @property {React.ReactNode} [toolbar] - Content to be displayed in the top toolbar of the dialog.
+  @property {React.ReactNode} [actions] - Content to be displayed in the bottom actions toolbar of the dialog.
+  @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 {(event: React.SyntheticEvent, reason: string) => void} [onClose] - Callback function fired when the dialog is closed. 
+*/
+
 /**
  * Dialog
  *
@@ -48,6 +68,12 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
  *   注意: 当设置明确的 width 时, 可能需要同时设置 maxWidth=false (mui dialog 默认 maxWidth=sm, 设置的 width 可能受限)
  * - 添加默认最小尺寸 (300x300), 在需要 先展示 loading 再展示异步数据 的时候避免 loading 阶段窗口过小
  */
+
+/**
+ * @description
+ * @param {DialogProps} props
+ * @return {React.ReactComponentElement}
+ */
 function Dialog(_ref) {
   let {
     children,
@@ -142,7 +168,13 @@ Dialog.defaultProps = {
   actionsPosition: 'right',
   PaperProps: {}
 };
+/**
+ * @type {import('@emotion/styled').StyledComponent<import('@mui/material').DialogProps, {}, { ref?: React.Ref<any> | undefined;}>}
+ */
+
 const StyledMuiDialog = (0, _Theme.styled)(_Dialog.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .MuiDialog-paper {\n    ", ";\n  }\n  .MuiDialogContent-root {\n    padding: 16px 24px;\n  }\n  .MuiDialogActions-root {\n    padding: 8px 24px 16px 24px;\n  }\n  .MuiDialogActions-root.ux-dialog_actions--left {\n    justify-content: flex-start;\n  }\n  .MuiDialogActions-root.ux-dialog_actions--right {\n    justify-content: flex-end;\n  }\n  .MuiDialogActions-root.ux-dialog_actions--center {\n    justify-content: center;\n  }\n"])), props => props.fullScreen ? 'border-radius: 0;' : '');
+/** @type {import('@emotion/styled').StyledComponent<import('react').ComponentPropsWithoutRef<"div">, {}, { ref?: React.Ref<any> | undefined;}>} */
+
 const Header = (0, _Theme.styled)('div')(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 16px 24px;\n  .ux-dialog_left {\n    display: flex;\n    justify-content: flex-start;\n    align-items: center;\n    min-width: 0;\n  }\n  .ux-dialog_right {\n    display: flex;\n    justify-content: flex-end;\n    align-items: center;\n  }\n  .ux-dialog_toolbar {\n    display: flex;\n    align-items: center;\n  }\n  .ux-dialog_title {\n    margin: 0;\n    font-size: 18px;\n    font-weight: 500;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n  .ux-dialog_closeButton {\n    /* \u4F7F closeButton \u4E0E content \u5DE6/\u53F3\u5BF9\u9F50 */\n    ", "\n  }\n"])), props => props.isMobile ? 'margin-left: -12px;' : 'margin-right: -12px;');
 var _default = Dialog;
 exports.default = _default;

package/lib/Empty/index.js

@@ -32,6 +32,20 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
 const Wrapper = (0, _Theme.styled)('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: column;\n  height: 100%;\n  min-height: 100px;\n  color: #999;\n  .empty-icon {\n    margin: 10px 0;\n  }\n"])));
+/**
+ * Empty component to display empty state
+ * @typedef {{
+ *   color?: string;
+ *   size?: number;
+ *   children?: import('react').ReactNode;
+ * } & import('react').ComponentPropsWithoutRef<"div"> } EmptyProps
+ */
+
+/**
+ * Empty state component
+ * @param {EmptyProps} props
+ * @returns {JSX.Element}
+ */
 
 function Empty(_ref) {
   let {

package/lib/Img/index.js

@@ -35,10 +35,34 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
+/**
+ * @typedef {Object} ImgExProps
+ * @property {string} src - required
+ * @property {string} [alt]
+ * @property {string} [size='cover']
+ * @property {string} [position='top center']
+ * @property {object} [style]
+ * @property {number} [ratio=1]
+ * @property {string} [repeat='no-repeat']
+ * @property {number} [width]
+ * @property {number} [height]
+ * @property {boolean} [lazy=true]
+ * @property {string} [placeholder]
+ * @property {string} [fallback]
+ * @property {string} [className='']
+ * @property {function} [onError=() => {}]
+ * @property {function} [onSuccess=() => {}]
+ */
+
+/**
+ * @typedef {ImgExProps & import('react').ComponentPropsWithoutRef<"div">} ImgProps
+ */
 const PREFIX = 'Img';
 const classes = {
   root: "".concat(PREFIX, "-root")
 };
+/** @type {import('@emotion/styled').StyledComponent<import('react').ComponentPropsWithoutRef<"div">, {}, { ref?: React.Ref<any> | undefined;}>} */
+
 const Root = (0, _Theme.styled)('div')(() => ({
   ["& .".concat(classes.root)]: {
     position: 'relative',
@@ -72,6 +96,11 @@ const Root = (0, _Theme.styled)('div')(() => ({
     }
   }
 }));
+/**
+ *
+ * @param {ImgProps} props
+ * @returns {React.ReactComponentElement}
+ */
 
 function Img(_ref) {
   let {
@@ -124,6 +153,9 @@ function Img(_ref) {
     paddingTop: "".concat(actualRatio, "%")
   }), // eslint-disable-next-line react-hooks/exhaustive-deps
   [actualSrc, position, size, imgState]);
+  /**
+   * @type {CSSStyleDeclaration}
+   */
 
   const outerStyle = _objectSpread(_objectSpread({}, style), {}, {
     display: 'inline-block',

package/lib/Logo/index.js

@@ -107,6 +107,21 @@ DarkText.defaultProps = {
   height: "18",
   viewBox: "0 0 99 18"
 };
+/**
+  @typedef {import('react').HTMLAttributes<HTMLSpanElement> & {
+    mode?: 'light' | 'dark',
+    layout?: 'vertical' | 'horizontal',
+    showText?: boolean,
+    showLogo?: boolean,    
+  }} LogoProps
+*/
+
+/**
+ * @description
+ * @export
+ * @param {LogoProps} props
+ * @return {React.ReactComponentElement}
+ */
 
 function Logo(_ref) {
   let {
@@ -142,4 +157,6 @@ Logo.defaultProps = {
   showText: true,
   showLogo: true
 };
+/** @type {import('@emotion/styled').StyledComponent<HTMLSpanElement, {}, { ref?: React.Ref<any> | undefined;}>} */
+
 const Container = (0, _Theme.styled)('span')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline-flex;\n  flex-direction: ", ";\n  justify-content: center;\n  align-items: center;\n\n  .logo-text {\n    ", "\n    ", ";\n  }\n"])), props => props.layout === 'horizontal' ? 'row' : 'column', props => props.layout === 'vertical' ? 'margin-top: 8px;' : '', props => props.layout === 'vertical' ? '' : 'margin-left: 8px;');

package/lib/SessionManager/index.js

@@ -480,7 +480,8 @@ SessionManager.propTypes = {
     switchDid: _propTypes.default.func.isRequired,
     switchProfile: _propTypes.default.func.isRequired,
     switchPassport: _propTypes.default.func.isRequired,
-    bindWallet: _propTypes.default.func.isRequired
+    bindWallet: _propTypes.default.func.isRequired,
+    refresh: _propTypes.default.func.isRequired
   }).isRequired,
   locale: _propTypes.default.string,
   showText: _propTypes.default.bool,

package/lib/SplitButton/index.js

@@ -47,8 +47,23 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
+/**
+ * SplitButton 组件 Props
+ * @typedef {{
+ *  size?: 'small' | 'medium' | 'large';
+ *  color?: 'primary' | 'secondary' | 'inherit';
+ *  menu?: Array<import('@mui/material').MenuItem> | import('@mui/material').MenuItem>;
+ *  children?: JSX.Element | (() => JSX.Element);
+ *  variant?: 'outlined' | 'contained';
+ *  onClick?: () => void;
+ *  menuButtonProps?: import('@mui/material').ButtonProps;
+ * } & import('@mui/material').ButtonGroupProps } SplitButtonProps
+ */
+
 /**
  * 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.
+ * @param {SplitButtonProps} props
+ * @returns {JSX.Element}
  */
 function SplitButton(_ref) {
   let {
@@ -83,7 +98,7 @@ function SplitButton(_ref) {
 
 
   const handleItemClick = e => {
-    if (e.target.classList.contains('MuiMenuItem-root')) {
+    if (e.target.closest('.MuiMenuItem-root')) {
       setOpen(false);
     }
   };
@@ -143,6 +158,10 @@ SplitButton.defaultProps = {
   onClick: () => {},
   menuButtonProps: {}
 };
+/**
+ * @type {import('@mui/material').MenuItem}
+ */
+
 SplitButton.Item = _MenuItem.default;
 const StyledButtonGroup = (0, _Theme.styled)(_ButtonGroup.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  > .MuiButtonBase-root:last-of-type {\n    min-width: 2em;\n    padding-left: 0;\n    padding-right: 0;\n  }\n"])));
 const StyledPopper = (0, _Theme.styled)(_Popper.default)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  z-index: ", ";\n  .MuiList-root {\n    padding: 4px 0;\n  }\n  .MuiListItem-root {\n    padding-top: 4px;\n    padding-bottom: 4px;\n  }\n"])), props => props.theme.zIndex.tooltip);

package/lib/Switch/index.js

@@ -84,8 +84,18 @@ const IOSSwitch = (0, _Theme.styled)(props => /*#__PURE__*/(0, _jsxRuntime.jsx)(
   };
 });
 /**
- * 抽取 blocklet server 中使用的 iOS 风格的 Switch, 该组件把 FormControlLabel 和 MuiSwitch 组合在一起,
+ * Switch 组件 Props
+ * @typedef {{
+ *  labelProps?: import('@mui/material').FormControlLabelProps;
+ * } & import('@mui/material').SwitchProps } SwitchProps
+ */
+
+/**
+ * 抽取 blocklet server 中使用的 iOS 风格的 Switch,
+ * 该组件把 FormControlLabel 和 MuiSwitch 组合在一起,
  * 兼容 mui Switch props, 使用 labelProps 控制 FormControlLabel
+ * @param {SwitchProps} props
+ * @returns {JSX.Element}
  */
 
 function Switch(_ref2) {

package/lib/Toast/index.js

@@ -24,12 +24,22 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
+/**
+ * @type {import('notistack').ProviderContext['enqueueSnackbar']}
+ */
 const noop = () => {};
 
 let _success = noop;
 let _error = noop;
 let _warning = noop;
 let _info = noop;
+/**
+ * @description
+ * @param {(message: import('notistack').SnackbarMessage, options?: import('notistack').OptionsObject) => import('notistack').SnackbarKey} enqueueSnackbar
+ * @param {import('notistack').ProviderContext['enqueueSnackbar']} enqueueSnackbar
+ * @param {import('notistack').VariantType} variant
+ * @returns {import('notistack').ProviderContext['enqueueSnackbar']}
+ */
 
 const genFn = (enqueueSnackbar, variant) => (message, opts) => {
   enqueueSnackbar(message, _objectSpread({
@@ -83,17 +93,60 @@ function Toast() {
 }
 
 var _default = {
-  success: function success() {
-    return _success(...arguments);
+  /**
+   *
+   * @param {import('notistack').SnackbarMessage} message
+   * @param {import('notistack').OptionsObject} options
+   * @returns {import('notistack').SnackbarKey}
+   */
+  success: function success(message, options) {
+    for (var _len = arguments.length, args = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
+      args[_key - 2] = arguments[_key];
+    }
+
+    return _success(message, options, ...args);
   },
-  error: function error() {
-    return _error(...arguments);
+
+  /**
+   *
+   * @param {import('notistack').SnackbarMessage} message
+   * @param {import('notistack').OptionsObject} options
+   * @returns {import('notistack').SnackbarKey}
+   */
+  error: function error(message, options) {
+    for (var _len2 = arguments.length, args = new Array(_len2 > 2 ? _len2 - 2 : 0), _key2 = 2; _key2 < _len2; _key2++) {
+      args[_key2 - 2] = arguments[_key2];
+    }
+
+    return _error(message, options, ...args);
   },
-  warning: function warning() {
-    return _warning(...arguments);
+
+  /**
+   *
+   * @param {import('notistack').SnackbarMessage} message
+   * @param {import('notistack').OptionsObject} options
+   * @returns {import('notistack').SnackbarKey}
+   */
+  warning: function warning(message, options) {
+    for (var _len3 = arguments.length, args = new Array(_len3 > 2 ? _len3 - 2 : 0), _key3 = 2; _key3 < _len3; _key3++) {
+      args[_key3 - 2] = arguments[_key3];
+    }
+
+    return _warning(message, options, ...args);
   },
-  info: function info() {
-    return _info(...arguments);
+
+  /**
+   *
+   * @param {import('notistack').SnackbarMessage} message
+   * @param {import('notistack').OptionsObject} options
+   * @returns {import('notistack').SnackbarKey}
+   */
+  info: function info(message, options) {
+    for (var _len4 = arguments.length, args = new Array(_len4 > 2 ? _len4 - 2 : 0), _key4 = 2; _key4 < _len4; _key4++) {
+      args[_key4 - 2] = arguments[_key4];
+    }
+
+    return _info(message, options, ...args);
   }
 };
 exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.5.46",
+  "version": "2.5.48",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -45,11 +45,11 @@
   "peerDependencies": {
     "react": ">=18.1.0"
   },
-  "gitHead": "6c4af406becbfe36208b41d76acaa7dc97528cc0",
+  "gitHead": "79c5d91c07cd0d7c76286b9865d902a27acc163f",
   "dependencies": {
     "@arcblock/did-motif": "^1.1.10",
-    "@arcblock/icons": "^2.5.46",
-    "@arcblock/react-hooks": "^2.5.46",
+    "@arcblock/icons": "^2.5.48",
+    "@arcblock/react-hooks": "^2.5.48",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",

package/src/ActionButton/index.js

@@ -4,9 +4,34 @@ import Button from '../Button';
 import { mergeProps } from '../Util';
 import { withDeprecated } from '../Util/deprecate';
 
+/**
+ * Action button component
+ * @typedef {{
+ *  href: string;
+ *  children?: import('react').ReactNode;
+ *  gradient?: string;
+ *  color?: string;
+ *  icon?: string;
+ *  border?: string;
+ *  text?: string;
+ *  theme?: string;
+ *  variant?: string;
+ *  size?: string;
+ *  width?: string;
+ * }} ActionButtonProps
+ */
+
+/**
+ * Action button component
+ * @param {ActionButtonProps} props
+ * @returns {JSX.Element}
+ */
 function ActionButton(props) {
+  /** @type {ActionButtonProps & {}} */
   const newProps = mergeProps(props, ActionButton);
   const { href, icon, size, color, theme, variant, gradient, children, text, ...rest } = newProps;
+
+  /** @type {import('react').CSSProperties} */
   const styles = {};
   if (gradient) {
     styles.backgroundImage = gradient;

package/src/ActivityIndicator/index.js

@@ -8,6 +8,16 @@ import { styled } from '../Theme';
 
 /**
  * ActivityIndicator is used when we want to tell the user the request they made on the UI will take time.
+ * @typedef {{
+ *  interval?: number;
+ *  messages: string[];
+ * } & import('react').ComponentPropsWithoutRef<"div"> } ActivityIndicatorProps
+ */
+
+/**
+ * @description ActivityIndicator is used when we want to tell the user the request they made on the UI will take time.
+ * @param {ActivityIndicatorProps} props
+ * @returns {JSX.Element}
  */
 export default function ActivityIndicator({ messages, interval, ...rest }) {
   const [index, setIndex] = useState(0);

package/src/Alert/index.js

@@ -35,10 +35,29 @@ const types = {
   },
 };
 
+/**
+ * Alert notification component
+ * @typedef {{
+ *  type?: 'error' | 'warning' | 'success' | 'tip';
+ *  children: any;
+ *  className?: string;
+ *  style?: object | string;
+ *  variant?: 'border' | 'icon';
+ * } & import('react').ComponentPropsWithoutRef<"div"> } AlertProps
+ */
+
+/**
+ * Alert notification component
+ * @param {AlertProps} props
+ * @returns {JSX.Element}
+ */
 function Alert(props) {
+  /** @type {AlertProps} */
   const newProps = mergeProps(props, Alert, ['style']);
   const { type, children, style, className, variant, ...rest } = newProps;
   const { icon, color, backgroundColor, borderColor } = types[type] || types.success;
+
+  /** @type {import('react').CSSProperties} */
   const styles = Object.assign(
     {
       color: blueGrey[500],

package/src/Avatar/index.js

@@ -20,7 +20,25 @@ const isEthereumDid = (did) => {
   return true;
 };
 
-// 参考: https://github.com/blocklet/block-explorer/issues/478#issuecomment-1038954976
+/**
+ * Avatar component
+ * @typedef {{
+ *  did: string;
+ *  size?: number;
+ *  variant?: 'circle' | 'rounded' | 'default';
+ *  animation?: boolean;
+ *  shape?: '' | 'rectangle' | 'square' | 'hexagon' | 'circle';
+ *  src?: string;
+ *  responsive?: boolean;
+ * }} AvatarProps
+ */
+
+/**
+ * Avatar component
+ * @see 参考: https://github.com/blocklet/block-explorer/issues/478#issuecomment-1038954976
+ * @param {AvatarProps} props
+ * @returns {JSX.Element}
+ */
 function Avatar(props) {
   const [imgError, setImgError] = useState(false);
   const newProps = mergeProps(props, Avatar, []);
@@ -89,6 +107,7 @@ Avatar.propTypes = {
   animation: PropTypes.bool,
   // shape 仅对 did motif 有效, 明确指定 motif shape, 而非由 did role type 自动推断 shape
   shape: PropTypes.oneOf(['', 'rectangle', 'square', 'hexagon', 'circle']),
+  responsive: PropTypes.bool,
 };
 
 Avatar.defaultProps = {
@@ -96,6 +115,7 @@ Avatar.defaultProps = {
   variant: 'default',
   animation: false,
   shape: '',
+  responsive: false,
 };
 
 const BlockyIconContainer = styled('div')`

package/src/Badge/index.js

@@ -30,6 +30,22 @@ const types = {
   },
 };
 
+/**
+ * Badge component to display notification badge
+ * @typedef {{
+ *   children: import('react').ReactNode;
+ *   content?: string;
+ *   type?: 'error' | 'warning' | 'success' | 'primary' | 'reverse';
+ *   className?: string;
+ *   style?: object | string;
+ * } & import('@mui/material').TypographyProps } BadgeProps
+ */
+
+/**
+ * Badge notification component
+ * @param {BadgeProps} props
+ * @returns {JSX.Element}
+ */
 function Badge(props) {
   const newProps = mergeProps(props, Badge, ['style']);
   const { type, content, children, style, className, forwardedRef, ...rest } = newProps;

package/src/Blocklet/blocklet.js

@@ -119,6 +119,30 @@ const Div = styled('div')`
     font-size: 12px;
   }
 `;
+
+/**
+ * BlockletStore component
+ * @typedef {{
+ *  title?: string | JSX.Element;
+ *  did?: string;
+ *  description?: string | JSX.Element;
+ *  cover?: string;
+ *  version?: string;
+ *  buttonText?: string;
+ *  buttonDisabled?: boolean;
+ *  buttonLoading?: boolean;
+ *  button?: JSX.Element;
+ *  onButtonClick?: Function;
+ *  onMainClick?: Function;
+ *  className?: string;
+ * } & import('react').ComponentPropsWithoutRef<"div"> } BlockletStoreProps
+ */
+
+/**
+ * BlockletStore component
+ * @param {BlockletStoreProps} props
+ * @returns {JSX.Element}
+ */
 export default function BlockletStore({
   title,
   did,

package/src/BlockletNFT/index.js

@@ -198,6 +198,33 @@ BlockletIcon.propTypes = {
   name: PropTypes.string.isRequired,
 };
 
+/**
+ * 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}
+ */
 export default function BlockletNFT({
   title,
   did,

package/src/Dialog/confirm.js

@@ -2,7 +2,25 @@ import PropTypes from 'prop-types';
 import Button from '../Button';
 import Dialog from './dialog';
 
+/**
+  @typedef {Object} ConfirmProps
+  @property {boolean} open
+  @property {React.ReactNode} title
+  @property {React.ReactNode} children
+  @property {() => void | Promise<void>} onConfirm
+  @property {() => void | Promise<void>} onCancel
+  @property {boolean} [showCancelButton=true]
+  @property {{text: string, props?: import('../Button/wrap').ButtonProps}} [confirmButton={text: 'Confirm'}]
+  @property {{text: string, props?: import('../Button/wrap').ButtonProps}} [cancelButton={text: 'Cancel'}]
+  @property {import('@mui/material').PaperProps} [PaperProps={}] 
+*/
+
 // 注意排在 {...rest} 之后的 props 优先级更高
+/**
+ *
+ * @param {ConfirmProps} props
+ * @returns {import('react').ReactComponentElement}
+ */
 export default function Confirm({
   title,
   children,

package/src/Dialog/dialog.js

@@ -8,6 +8,26 @@ import CloseIcon from '@mui/icons-material/Close';
 
 import { styled, useTheme } from '../Theme';
 
+/**
+  @typedef {import('@mui/material').PaperProps & {
+    minWidth: number | string,
+    minHeight: number | string,
+  }} PaperStyle
+*/
+
+/**
+  @typedef {Object} DialogProps
+  @property {React.ReactNode} children - The content of the dialog.
+  @property {React.ReactNode} [title] - The title of the dialog.
+  @property {React.ReactNode} [prepend] - Content to be displayed before the dialog title.
+  @property {React.ReactNode} [toolbar] - Content to be displayed in the top toolbar of the dialog.
+  @property {React.ReactNode} [actions] - Content to be displayed in the bottom actions toolbar of the dialog.
+  @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 {(event: React.SyntheticEvent, reason: string) => void} [onClose] - Callback function fired when the dialog is closed. 
+*/
+
 /**
  * Dialog
  *
@@ -15,6 +35,11 @@ import { styled, useTheme } from '../Theme';
  *   注意: 当设置明确的 width 时, 可能需要同时设置 maxWidth=false (mui dialog 默认 maxWidth=sm, 设置的 width 可能受限)
  * - 添加默认最小尺寸 (300x300), 在需要 先展示 loading 再展示异步数据 的时候避免 loading 阶段窗口过小
  */
+/**
+ * @description
+ * @param {DialogProps} props
+ * @return {React.ReactComponentElement}
+ */
 function Dialog({ children, title, prepend, toolbar, actions, showCloseButton, actionsPosition, PaperProps, ...rest }) {
   const theme = useTheme();
   // 不管是否是 mobile 设备, 只要屏宽 < sm, dialog 就处于 mobile 模式
@@ -86,7 +111,9 @@ Dialog.defaultProps = {
   actionsPosition: 'right',
   PaperProps: {},
 };
-
+/**
+ * @type {import('@emotion/styled').StyledComponent<import('@mui/material').DialogProps, {}, { ref?: React.Ref<any> | undefined;}>}
+ */
 const StyledMuiDialog = styled(MuiDialog)`
   .MuiDialog-paper {
     ${(props) => (props.fullScreen ? 'border-radius: 0;' : '')};
@@ -108,6 +135,7 @@ const StyledMuiDialog = styled(MuiDialog)`
   }
 `;
 
+/** @type {import('@emotion/styled').StyledComponent<import('react').ComponentPropsWithoutRef<"div">, {}, { ref?: React.Ref<any> | undefined;}>} */
 const Header = styled('div')`
   display: flex;
   justify-content: space-between;

package/src/Empty/index.js

@@ -15,6 +15,20 @@ const Wrapper = styled('div')`
   }
 `;
 
+/**
+ * Empty component to display empty state
+ * @typedef {{
+ *   color?: string;
+ *   size?: number;
+ *   children?: import('react').ReactNode;
+ * } & import('react').ComponentPropsWithoutRef<"div"> } EmptyProps
+ */
+
+/**
+ * Empty state component
+ * @param {EmptyProps} props
+ * @returns {JSX.Element}
+ */
 function Empty({ color, size, children, ...rest }) {
   return (
     <Wrapper {...rest}>

package/src/Img/index.js

@@ -6,12 +6,36 @@ import Alert from 'mdi-material-ui/Alert';
 import ImageIcon from 'mdi-material-ui/Image';
 import { styled } from '../Theme';
 
+/**
+ * @typedef {Object} ImgExProps
+ * @property {string} src - required
+ * @property {string} [alt]
+ * @property {string} [size='cover']
+ * @property {string} [position='top center']
+ * @property {object} [style]
+ * @property {number} [ratio=1]
+ * @property {string} [repeat='no-repeat']
+ * @property {number} [width]
+ * @property {number} [height]
+ * @property {boolean} [lazy=true]
+ * @property {string} [placeholder]
+ * @property {string} [fallback]
+ * @property {string} [className='']
+ * @property {function} [onError=() => {}]
+ * @property {function} [onSuccess=() => {}]
+ */
+
+/**
+ * @typedef {ImgExProps & import('react').ComponentPropsWithoutRef<"div">} ImgProps
+ */
+
 const PREFIX = 'Img';
 
 const classes = {
   root: `${PREFIX}-root`,
 };
 
+/** @type {import('@emotion/styled').StyledComponent<import('react').ComponentPropsWithoutRef<"div">, {}, { ref?: React.Ref<any> | undefined;}>} */
 const Root = styled('div')(() => ({
   [`& .${classes.root}`]: {
     position: 'relative',
@@ -46,6 +70,11 @@ const Root = styled('div')(() => ({
   },
 }));
 
+/**
+ *
+ * @param {ImgProps} props
+ * @returns {React.ReactComponentElement}
+ */
 function Img({
   lazy,
   width,
@@ -97,6 +126,9 @@ function Img({
     [actualSrc, position, size, imgState]
   );
 
+  /**
+   * @type {CSSStyleDeclaration}
+   */
   const outerStyle = {
     ...style,
     display: 'inline-block',

package/src/Logo/index.js

@@ -7,6 +7,21 @@ import { ReactComponent as LightText } from './images/logo-light-text.svg';
 import { ReactComponent as DarkLogo } from './images/logo-dark-top.svg';
 import { ReactComponent as DarkText } from './images/logo-dark-text.svg';
 
+/**
+  @typedef {import('react').HTMLAttributes<HTMLSpanElement> & {
+    mode?: 'light' | 'dark',
+    layout?: 'vertical' | 'horizontal',
+    showText?: boolean,
+    showLogo?: boolean,    
+  }} LogoProps
+*/
+
+/**
+ * @description
+ * @export
+ * @param {LogoProps} props
+ * @return {React.ReactComponentElement}
+ */
 export default function Logo({ showText, showLogo, mode, layout, ...rest }) {
   const logo = mode === 'light' ? <LightLogo /> : <DarkLogo />;
   const text = mode === 'light' ? <LightText className="logo-text" /> : <DarkText className="logo-text" />;
@@ -33,6 +48,7 @@ Logo.defaultProps = {
   showLogo: true,
 };
 
+/** @type {import('@emotion/styled').StyledComponent<HTMLSpanElement, {}, { ref?: React.Ref<any> | undefined;}>} */
 const Container = styled('span')`
   display: inline-flex;
   flex-direction: ${(props) => (props.layout === 'horizontal' ? 'row' : 'column')};

package/src/SessionManager/index.jsx

@@ -391,6 +391,7 @@ SessionManager.propTypes = {
     switchProfile: PropTypes.func.isRequired,
     switchPassport: PropTypes.func.isRequired,
     bindWallet: PropTypes.func.isRequired,
+    refresh: PropTypes.func.isRequired,
   }).isRequired,
   locale: PropTypes.string,
   showText: PropTypes.bool,

package/src/SplitButton/index.js

@@ -11,8 +11,23 @@ import Button from '@mui/material/Button';
 
 import { styled } from '../Theme';
 
+/**
+ * SplitButton 组件 Props
+ * @typedef {{
+ *  size?: 'small' | 'medium' | 'large';
+ *  color?: 'primary' | 'secondary' | 'inherit';
+ *  menu?: Array<import('@mui/material').MenuItem> | import('@mui/material').MenuItem>;
+ *  children?: JSX.Element | (() => JSX.Element);
+ *  variant?: 'outlined' | 'contained';
+ *  onClick?: () => void;
+ *  menuButtonProps?: import('@mui/material').ButtonProps;
+ * } & import('@mui/material').ButtonGroupProps } SplitButtonProps
+ */
+
 /**
  * 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.
+ * @param {SplitButtonProps} props
+ * @returns {JSX.Element}
  */
 export default function SplitButton({ size, color, menu, children, variant, onClick, menuButtonProps, ...rest }) {
   const [open, setOpen] = useState(false);
@@ -34,7 +49,7 @@ export default function SplitButton({ size, color, menu, children, variant, onCl
 
   // 点击 item 后收起下拉菜单, 如果想要点击 action 后不收起下拉菜单, 可以在 item#onClick 时调用 e.stopPropagation()
   const handleItemClick = (e) => {
-    if (e.target.classList.contains('MuiMenuItem-root')) {
+    if (e.target.closest('.MuiMenuItem-root')) {
       setOpen(false);
     }
   };
@@ -84,7 +99,9 @@ SplitButton.defaultProps = {
   onClick: () => {},
   menuButtonProps: {},
 };
-
+/**
+ * @type {import('@mui/material').MenuItem}
+ */
 SplitButton.Item = MenuItem;
 
 const StyledButtonGroup = styled(ButtonGroup)`

package/src/Switch/index.js

@@ -53,8 +53,18 @@ const IOSSwitch = styled((props) => <MuiSwitch focusVisibleClassName=".Mui-focus
 );
 
 /**
- * 抽取 blocklet server 中使用的 iOS 风格的 Switch, 该组件把 FormControlLabel 和 MuiSwitch 组合在一起,
+ * Switch 组件 Props
+ * @typedef {{
+ *  labelProps?: import('@mui/material').FormControlLabelProps;
+ * } & import('@mui/material').SwitchProps } SwitchProps
+ */
+
+/**
+ * 抽取 blocklet server 中使用的 iOS 风格的 Switch,
+ * 该组件把 FormControlLabel 和 MuiSwitch 组合在一起,
  * 兼容 mui Switch props, 使用 labelProps 控制 FormControlLabel
+ * @param {SwitchProps} props
+ * @returns {JSX.Element}
  */
 function Switch({ labelProps, ...rest }) {
   if (labelProps) {

package/src/Toast/index.js

@@ -3,13 +3,22 @@ import { SnackbarProvider, useSnackbar } from 'notistack';
 import IconButton from '@mui/material/IconButton';
 import CloseIcon from '@mui/icons-material/Close';
 
+/**
+ * @type {import('notistack').ProviderContext['enqueueSnackbar']}
+ */
 const noop = () => {};
 
 let success = noop;
 let error = noop;
 let warning = noop;
 let info = noop;
-
+/**
+ * @description
+ * @param {(message: import('notistack').SnackbarMessage, options?: import('notistack').OptionsObject) => import('notistack').SnackbarKey} enqueueSnackbar
+ * @param {import('notistack').ProviderContext['enqueueSnackbar']} enqueueSnackbar
+ * @param {import('notistack').VariantType} variant
+ * @returns {import('notistack').ProviderContext['enqueueSnackbar']}
+ */
 const genFn = (enqueueSnackbar, variant) => (message, opts) => {
   enqueueSnackbar(message, {
     autoHideDuration: 3000,
@@ -58,8 +67,35 @@ function Toast() {
 export { ToastProvider };
 
 export default {
-  success: (...args) => success(...args),
-  error: (...args) => error(...args),
-  warning: (...args) => warning(...args),
-  info: (...args) => info(...args),
+  /**
+   *
+   * @param {import('notistack').SnackbarMessage} message
+   * @param {import('notistack').OptionsObject} options
+   * @returns {import('notistack').SnackbarKey}
+   */
+  success: (message, options, ...args) => success(message, options, ...args),
+
+  /**
+   *
+   * @param {import('notistack').SnackbarMessage} message
+   * @param {import('notistack').OptionsObject} options
+   * @returns {import('notistack').SnackbarKey}
+   */
+  error: (message, options, ...args) => error(message, options, ...args),
+
+  /**
+   *
+   * @param {import('notistack').SnackbarMessage} message
+   * @param {import('notistack').OptionsObject} options
+   * @returns {import('notistack').SnackbarKey}
+   */
+  warning: (message, options, ...args) => warning(message, options, ...args),
+
+  /**
+   *
+   * @param {import('notistack').SnackbarMessage} message
+   * @param {import('notistack').OptionsObject} options
+   * @returns {import('notistack').SnackbarKey}
+   */
+  info: (message, options, ...args) => info(message, options, ...args),
 };