@arcblock/ux 2.9.12 → 2.9.14

package/es/Address/did-address.js

@@ -96,22 +96,18 @@ const DidAddress = /*#__PURE__*/forwardRef(({
     size: size,
     ...rest,
     ref: ref,
-    children: [prepend, /*#__PURE__*/_jsxs(Tooltip, {
+    children: [prepend, /*#__PURE__*/_jsx(Box, {
+      sx: {
+        display: 'none'
+      },
+      ref: textRef,
+      children: children
+    }), /*#__PURE__*/_jsx(Tooltip, {
       title: copyable ? '' : translations[locale].copied,
       placement: "bottom",
       arrow: true,
       open: copied,
-      children: [/*#__PURE__*/_jsx(Box, {
-        ref: textRef,
-        component: "span",
-        className: "did-address-text did-address-truncate",
-        sx: {
-          display: compact ? 'none' : 'inline',
-          cursor: copyable ? 'text' : 'pointer'
-        },
-        onDoubleClick: copyable ? noop : onCopy,
-        children: children
-      }), compact && /*#__PURE__*/_jsx(Box, {
+      children: compact ? /*#__PURE__*/_jsx(Box, {
         component: "span",
         className: "did-address-text",
         sx: {
@@ -124,7 +120,16 @@ const DidAddress = /*#__PURE__*/forwardRef(({
           showCopyButtonInTooltip: showCopyButtonInTooltip,
           children: children
         })
-      })]
+      }) : /*#__PURE__*/_jsx(Box, {
+        component: "span",
+        className: "did-address-text did-address-truncate",
+        sx: {
+          display: compact ? 'none' : 'inline',
+          cursor: copyable ? 'text' : 'pointer'
+        },
+        onDoubleClick: copyable ? noop : onCopy,
+        children: children
+      })
     }), copyElement, append]
   });
 });

package/es/Colors/themes/default.js

@@ -74,5 +74,4 @@ const colors = {
   }
   // TODO: 等设计规范稳定后, 考虑扩展 trade 相关的常用颜色 (send/receive/exchange/transfer)
 };
-
 export default colors;

package/es/Colors/themes/temp.js

@@ -12,6 +12,15 @@ const colors = {
   surfaceSuccess: 'rgba(13, 202, 134, 1)',
   primaryBase: 'rgba(19, 125, 250, 1)',
   primary100: 'rgba(19, 125, 250, 1)',
-  gray6: 'rgba(17, 22, 24, 0.06)'
+  gray6: 'rgba(17, 22, 24, 0.06)',
+  backgroundsBgSubtitle: 'rgba(249, 250, 251, 1)',
+  backgroundsBgComponent: 'rgba(241, 243, 245, 1)',
+  backgroundsBgField: 'rgba(249, 250, 251, 1)',
+  foregroundsFgBase: 'rgba(3, 7, 18, 1)',
+  foregroundsFgSubtile: 'rgba(75, 85, 99, 1)',
+  strokeBorderBase: 'rgba(229, 231, 235, 1)',
+  strokeBorderStrong: 'rgba(209, 213, 219, 1)',
+  buttonsButtonNeutral: 'rgba(255, 255, 255, 1)',
+  buttonsButtonNeutralHover: 'rgba(243, 244, 246, 1)'
 };
 export default colors;

package/es/ContactForm/index.js

@@ -1,6 +1,6 @@
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 /* eslint-disable react/no-unused-prop-types */
 /* eslint-disable react/static-property-placement */
 import React from 'react';

package/es/DID/index.js

@@ -33,7 +33,6 @@ const isSquareMotif = roleType => {
     // ASSET
     17: true // TOKEN
   };
-
   return !roles[roleType];
 };
 const getAvatarSize = (didMotifInfo, isEthDid, size) => {

package/es/Dialog/confirm.js

@@ -1,7 +1,4 @@
 import PropTypes from 'prop-types';
-import { forwardRef, useRef, useImperativeHandle } from 'react';
-import { useMemoizedFn, useReactive } from 'ahooks';
-import noop from 'lodash/noop';
 import Button from '../Button';
 import Dialog from './dialog';
 
@@ -90,99 +87,4 @@ Confirm.defaultProps = {
     text: 'Cancel'
   },
   PaperProps: {}
-};
-const ConfirmHolder = /*#__PURE__*/forwardRef((props, ref) => {
-  const state = useReactive({
-    show: false,
-    title: '',
-    content: '',
-    onConfirm: noop,
-    onCancel: noop,
-    loading: false,
-    confirmButtonText: 'Confirm',
-    cancelButtonText: 'Cancel'
-  });
-  const open = useMemoizedFn((params = {}) => {
-    state.show = true;
-    state.title = params.title;
-    state.content = params.content;
-    state.onConfirm = params.onConfirm || noop;
-    state.onCancel = params.onCancel || noop;
-    if (params.confirmButtonText) state.confirmButtonText = params.confirmButtonText;
-    if (params.cancelButtonText) state.cancelButtonText = params.cancelButtonText;
-    state.loading = false;
-  });
-  const reset = useMemoizedFn(() => {
-    state.title = '';
-    state.content = '';
-    state.onConfirm = noop;
-    state.onCancel = noop;
-    state.confirmButtonText = 'Confirm';
-    state.cancelButtonText = 'Cancel';
-  });
-  const close = useMemoizedFn(() => {
-    state.show = false;
-    setTimeout(() => {
-      reset();
-    }, 300);
-  });
-  const onCancel = useMemoizedFn(() => {
-    close();
-    state?.onCancel();
-  }, []);
-  const onConfirm = useMemoizedFn(async () => {
-    state.loading = true;
-    try {
-      await state?.onConfirm(close);
-    } finally {
-      state.loading = false;
-    }
-  }, []);
-  useImperativeHandle(ref, () => {
-    return {
-      open,
-      close
-    };
-  }, [open, close]);
-  return /*#__PURE__*/_jsx(Confirm, {
-    open: state.show,
-    title: state.title,
-    onConfirm: onConfirm,
-    onCancel: onCancel,
-    confirmButton: {
-      text: state.confirmButtonText,
-      props: {
-        variant: 'contained',
-        color: 'primary',
-        loading: state.loading
-      }
-    },
-    cancelButton: {
-      text: state.cancelButtonText,
-      props: {
-        variant: 'outlined',
-        color: 'primary'
-      }
-    },
-    children: state.content
-  });
-});
-export function useConfirm() {
-  const confirmRef = useRef(null);
-  const open = useMemoizedFn((...args) => {
-    confirmRef.current?.open(...args);
-  });
-  const close = useMemoizedFn((...args) => {
-    confirmRef.current?.close(...args);
-  });
-  const confirmApi = {
-    open,
-    close
-  };
-  return {
-    confirmHolder: /*#__PURE__*/_jsx(ConfirmHolder, {
-      ref: confirmRef
-    }),
-    confirmApi
-  };
-}
+};

package/es/Dialog/dialog.js

@@ -1,10 +1,6 @@
 import PropTypes from 'prop-types';
-import MuiDialog from '@mui/material/Dialog';
-import MuiDialogContent from '@mui/material/DialogContent';
-import DialogActions from '@mui/material/DialogActions';
-import IconButton from '@mui/material/IconButton';
-import useMediaQuery from '@mui/material/useMediaQuery';
 import CloseIcon from '@mui/icons-material/Close';
+import { Typography, Dialog as MuiDialog, DialogContent as MuiDialogContent, DialogActions, IconButton, useMediaQuery } from '@mui/material';
 import { styled, useTheme } from '../Theme';
 
 /**
@@ -24,7 +20,7 @@ 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 {(event: React.SyntheticEvent, reason: string) => void} [onClose] - Callback function fired when the dialog is closed. 
+  @property {(event: React.SyntheticEvent, reason: string) => void} [onClose] - Callback function fired when the dialog is closed.
 */
 
 /**
@@ -89,7 +85,8 @@ function Dialog({
         children: [showCloseButton && isMobile && closeButton, prepend && /*#__PURE__*/_jsx("div", {
           className: "ux-dialog_prepend",
           children: prepend
-        }), title && /*#__PURE__*/_jsx("h6", {
+        }), title && /*#__PURE__*/_jsx(Typography, {
+          variant: "h6",
           className: "ux-dialog_title",
           children: title
         })]

package/es/Dialog/index.js

@@ -1,4 +1,4 @@
 // eslint-disable-next-line no-restricted-exports
 export { default } from './dialog';
 export { default as Confirm } from './confirm';
-export { useConfirm } from './confirm';
+export { default as useConfirm } from './use-confirm';

package/es/Dialog/use-confirm.js

@@ -0,0 +1,105 @@
+import { forwardRef, useImperativeHandle, useRef, useState } from 'react';
+import { useMemoizedFn, useReactive } from 'ahooks';
+import noop from 'lodash/noop';
+import Confirm from './confirm';
+import { jsx as _jsx } from "react/jsx-runtime";
+const ConfirmHolder = /*#__PURE__*/forwardRef((props, ref) => {
+  // HACK: 这里默认值不使用 null，来避免开发环境中的字段必填警告
+  const [title, setTitle] = useState('');
+  const [content, setContent] = useState('');
+  const state = useReactive({
+    show: false,
+    onConfirm: noop,
+    onCancel: noop,
+    loading: false,
+    confirmButtonText: 'Confirm',
+    cancelButtonText: 'Cancel'
+  });
+  const open = useMemoizedFn((params = {}) => {
+    setTitle(params.title);
+    setContent(params.content);
+    state.onConfirm = params.onConfirm || noop;
+    state.onCancel = params.onCancel || noop;
+    state.showCancelButton = params.showCancelButton ?? true;
+    if (params.confirmButtonText) state.confirmButtonText = params.confirmButtonText;
+    if (params.cancelButtonText) state.cancelButtonText = params.cancelButtonText;
+    state.loading = false;
+    state.show = true;
+  });
+  const reset = useMemoizedFn(() => {
+    setTitle('');
+    setContent('');
+    state.onConfirm = noop;
+    state.onCancel = noop;
+    state.confirmButtonText = 'Confirm';
+    state.cancelButtonText = 'Cancel';
+  });
+  const close = useMemoizedFn(() => {
+    state.show = false;
+    setTimeout(() => {
+      reset();
+    }, 300);
+  });
+  const onCancel = useMemoizedFn(() => {
+    close();
+    state?.onCancel();
+  }, []);
+  const onConfirm = useMemoizedFn(async () => {
+    state.loading = true;
+    try {
+      await state?.onConfirm(close);
+    } finally {
+      state.loading = false;
+    }
+  }, []);
+  useImperativeHandle(ref, () => {
+    return {
+      open,
+      close
+    };
+  }, [open, close]);
+  return /*#__PURE__*/_jsx(Confirm, {
+    ...props,
+    open: state.show,
+    title: title,
+    onConfirm: onConfirm,
+    onCancel: onCancel,
+    confirmButton: {
+      text: state.confirmButtonText,
+      props: {
+        variant: 'contained',
+        color: 'primary',
+        loading: state.loading
+      }
+    },
+    showCancelButton: state.showCancelButton,
+    cancelButton: {
+      text: state.cancelButtonText,
+      props: {
+        variant: 'outlined',
+        color: 'primary'
+      }
+    },
+    children: content
+  });
+});
+export default function useConfirm(props = {}) {
+  const confirmRef = useRef(null);
+  const open = useMemoizedFn((...args) => {
+    confirmRef.current?.open(...args);
+  });
+  const close = useMemoizedFn((...args) => {
+    confirmRef.current?.close(...args);
+  });
+  const confirmApi = {
+    open,
+    close
+  };
+  return {
+    confirmHolder: /*#__PURE__*/_jsx(ConfirmHolder, {
+      ...props,
+      ref: confirmRef
+    }),
+    confirmApi
+  };
+}

package/es/Locale/util.js

@@ -1,16 +1,21 @@
+import get from 'lodash/get';
+
 /* eslint-disable no-prototype-builtins */
 export const replace = (template, data) => template.replace(/{(\w*)}/g, (m, key) => data.hasOwnProperty(key) ? data[key] : '');
 export const translate = (translations, key, locale, fallbackLocale = 'en', data = {}) => {
-  if (!translations[locale] || !translations[locale][key]) {
+  const translation = translations[locale];
+  const translationValue = get(translation, key);
+  const fallbackValue = get(translations[fallbackLocale], key);
+  if (!translation || !translationValue) {
     console.warn(`Warning: no ${key} translation of ${locale}`);
-    if (fallbackLocale && translations[fallbackLocale]?.[key]) {
-      return replace(translations[fallbackLocale]?.[key], data);
+    if (fallbackLocale && fallbackValue) {
+      return replace(fallbackValue, data);
     }
     return key;
   }
   if (typeof translations[locale] === 'function' || translations[locale].then) {
-    return replace(translations[fallbackLocale][key], data);
+    return replace(fallbackValue, data);
   }
-  return replace(translations[locale][key], data);
+  return replace(translationValue, data);
 };
 export const t = translate;

package/es/NFTDisplay/index.js

@@ -82,7 +82,6 @@ function NFTDisplay({
       parsed.current = JSON.parse(data);
       // console.log('[debug] parse data')
     }
-
     const {
       vcId
     } = parsed.current;

package/es/Passport/index.js

@@ -0,0 +1,2 @@
+import PassportItem from './passport';
+export default PassportItem;

package/es/Passport/passport.js

@@ -0,0 +1,103 @@
+import PropTypes from 'prop-types';
+import upperFirst from 'lodash/upperFirst';
+import { Box } from '@mui/material';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import RevokeIcon from '@arcblock/icons/lib/RevokeIcon';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default function Passport({
+  passport,
+  user,
+  color,
+  width,
+  icon,
+  children,
+  createPassportSvg,
+  ...rest
+}) {
+  const {
+    t
+  } = useLocaleContext();
+  return /*#__PURE__*/_jsxs(Box, {
+    ...rest,
+    sx: {
+      display: 'flex',
+      alignItems: 'center',
+      ...rest?.sx
+    },
+    children: [/*#__PURE__*/_jsx(Box, {
+      className: "passport-item__display"
+      // eslint-disable-next-line react/no-danger
+      ,
+      dangerouslySetInnerHTML: {
+        __html: createPassportSvg({
+          title: 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,
+          preferredColor: color,
+          width
+        })
+      }
+    }), /*#__PURE__*/_jsxs(Box, {
+      className: "passport-item__body",
+      sx: {
+        p: 0,
+        ml: 3,
+        mt: 0
+      },
+      children: [/*#__PURE__*/_jsxs(Box, {
+        className: "passport-item__title",
+        sx: {
+          display: 'flex',
+          alignItems: 'center',
+          fontWeight: 400,
+          fontSize: '16px',
+          lineHeight: 1.1875,
+          color: '#222222'
+        },
+        children: [upperFirst(passport.title), /*#__PURE__*/_jsxs(Box, {
+          className: "passport-item__status-icon",
+          sx: {
+            svg: {
+              fill: '#bfbfbf',
+              height: '1.2em',
+              marginLeft: '0.4em'
+            }
+          },
+          children: [icon, passport.revoked && /*#__PURE__*/_jsx(RevokeIcon, {})]
+        })]
+      }), passport.expirationDate && /*#__PURE__*/_jsx(Box, {
+        className: "passport-item__title",
+        sx: {
+          display: 'flex',
+          alignItems: 'center',
+          fontWeight: 400,
+          fontSize: '16px',
+          lineHeight: 1.1875,
+          color: '#222222'
+        },
+        children: t('team.passport.validUntil', {
+          date: passport.expirationDate
+        })
+      }), children]
+    })]
+  });
+}
+Passport.propTypes = {
+  passport: PropTypes.any.isRequired,
+  user: PropTypes.any.isRequired,
+  color: PropTypes.string.isRequired,
+  createPassportSvg: PropTypes.func.isRequired,
+  icon: PropTypes.any,
+  children: PropTypes.any,
+  width: PropTypes.number
+};
+Passport.defaultProps = {
+  icon: null,
+  children: null,
+  width: 150
+};

package/es/SessionUser/components/logged-in.js

@@ -219,6 +219,6 @@ function SessionMenuItem({
   });
 }
 SessionMenuItem.propTypes = {
-  icon: PropTypes.string.isRequired,
+  icon: PropTypes.any.isRequired,
   title: PropTypes.string.isRequired
 };

package/es/SessionUser/components/user-info.js

@@ -91,7 +91,7 @@ export default function UserInfo({
         }), /*#__PURE__*/_jsx(Typography, {
           variant: "h6",
           sx: {
-            wordBreak: 'break-all'
+            wordBreak: 'break-word'
           },
           children: session.user.fullName
         })]

package/es/SessionUser/index.js

@@ -34,8 +34,8 @@ SessionUser.propTypes = {
     user: PropTypes.shape({
       did: PropTypes.string.isRequired,
       fullName: PropTypes.string.isRequired,
-      email: PropTypes.string.isRequired,
-      avatar: PropTypes.string.isRequired
+      avatar: PropTypes.string.isRequired,
+      email: PropTypes.string
     })
   }).isRequired,
   onBindWallet: PropTypes.func,

package/es/Tabs/index.js

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
-import MuiTabs from '@mui/material/Tabs';
-import MuiTab from '@mui/material/Tab';
+import { Tabs as MuiTabs, Tab as MuiTab } from '@mui/material';
+import { temp as colors } from '../Colors';
 import { styled } from '../Theme';
 import { jsx as _jsx } from "react/jsx-runtime";
 const PREFIX = 'index';
@@ -19,12 +19,98 @@ const StyledMuiTabs = styled(MuiTabs)(({
     }
   }
 }));
+function CardTabs({
+  tabs,
+  current,
+  onChange,
+  ...rest
+}) {
+  return /*#__PURE__*/_jsx(MuiTabs, {
+    scrollButtons: "auto",
+    value: current,
+    onChange: (_, newValue) => onChange(newValue),
+    ...rest,
+    variant: "scrollable",
+    sx: {
+      minHeight: 'auto',
+      '.MuiTabs-scrollButtons.Mui-disabled': {
+        opacity: 0.3,
+        cursor: 'not-allowed',
+        pointerEvents: 'auto'
+      },
+      '.MuiTabs-scroller': {
+        borderRadius: '100vw'
+      },
+      '.MuiTabs-flexContainer': {
+        borderRadius: '100vw',
+        backgroundColor: colors.backgroundsBgComponent,
+        padding: 0.5,
+        display: 'inline-flex',
+        columnGap: 0.25
+      },
+      '.MuiTab-root': {
+        borderRadius: '100vw',
+        border: '1px solid transparent',
+        minHeight: 'auto',
+        lineHeight: 1,
+        py: 1,
+        color: colors.foregroundsFgSubtile,
+        fontSize: '13px',
+        fontWeight: 'normal',
+        textTransform: 'capitalize',
+        transition: 'background-color 0.2s ease',
+        '&.Mui-selected, &:hover': {
+          backgroundColor: 'white',
+          borderColor: colors.lineBorderBase,
+          color: colors.foregroundsFgBase
+        }
+      },
+      '.MuiTabs-indicator': {
+        display: 'none'
+      },
+      ...rest.sx
+    },
+    children: tabs.map(x => /*#__PURE__*/_jsx(MuiTab, {
+      className: classes.tab,
+      value: x.value,
+      label: x.label,
+      icon: x.icon || null
+    }, x.value))
+  });
+}
+CardTabs.propTypes = {
+  tabs: PropTypes.array.isRequired,
+  current: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired
+};
+
+/**
+ * @typedef {import('@mui/material').TabsProps & {
+ *  tabs: string[];
+ *  onChange: (value) => {};
+ *  variant: 'card' | 'fullWidth' | 'scrollable' | 'standard'
+ * }} TabsProps
+ */
+
+/**
+ * @description
+ * @param { TabsProps} props
+ * @return {import('react').ReactNode}
+ */
+
 export default function Tabs({
   tabs,
   current,
   onChange,
   ...rest
 }) {
+  if (rest.variant === 'card') {
+    return /*#__PURE__*/_jsx(CardTabs, {
+      tabs: tabs,
+      current: current,
+      onChange: onChange
+    });
+  }
   return /*#__PURE__*/_jsx(StyledMuiTabs, {
     scrollButtons: "auto",
     variant: "scrollable",