@arcblock/ux 2.11.50 → 2.12.1

package/lib/NavMenu/style.d.ts

@@ -1,8 +1,13 @@
-type NavMenuBaseProps = {
+type NavMenuProps = {
     $bgColor: string;
     $textColor: string;
+};
+export declare const NavMenuRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & NavMenuProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {}>;
+export declare const NavMenuList: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, {}>;
+type NavMenuItemProps = {
     $activeTextColor: string;
 };
-export declare const HorizontalStyle: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & NavMenuBaseProps & import("react").ClassAttributes<HTMLElement> & import("react").HTMLAttributes<HTMLElement>, {}, {}>;
-export declare const InlineStyle: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & NavMenuBaseProps & import("react").ClassAttributes<HTMLElement> & import("react").HTMLAttributes<HTMLElement>, {}, {}>;
+export declare const NavMenuItem: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & NavMenuItemProps, import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, {}>;
+export declare const NavMenuSub: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & NavMenuItemProps & import("react").ClassAttributes<HTMLLIElement> & import("react").LiHTMLAttributes<HTMLLIElement>, {}, {}>;
+export declare const NavMenuSubList: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, {}>;
 export {};

package/lib/NavMenu/style.js

@@ -1,185 +1,225 @@
 import { styled } from '../Theme';
-const NavMenuBase = styled('nav', {
-  shouldForwardProp: prop => prop !== '$bgColor' && prop !== '$textColor' && prop !== '$activeTextColor'
-})`
-  background-color: ${props => props.$bgColor};
-  font-size: 16px;
-  // width: 100%;
-  ul {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-  }
-  .navmenu-item,
-  .navmenu-sub {
-    display: flex;
-    align-items: center;
-  }
-  a {
-    color: inherit;
-    text-decoration: none;
-  }
-  /* active/hover */
-  .navmenu-item,
-  .navmenu-sub {
-    color: ${props => props.$textColor};
-  }
-  .navmenu-item--active,
-  .navmenu-item:hover,
-  .navmenu-sub--opened {
-    color: ${props => props.$activeTextColor};
-  }
-
-  .navmenu-item {
-    position: relative;
-    cursor: pointer;
-    transition: color 0.2s ease-in-out;
-    a {
-      white-space: nowrap;
-    }
-    a::before {
-      position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-      background-color: transparent;
-      content: '';
-    }
-  }
-
-  .navmenu-sub {
-    position: relative;
-    cursor: pointer;
-  }
-  /* icon & expand icon */
-  .navmenu-item-icon,
-  .navmenu-sub-icon,
-  .navmenu-sub-expand-icon {
-    display: flex;
-    line-height: 1;
-  }
-  .navmenu-item-icon,
-  .navmenu-sub-icon {
-    margin-right: 4px;
-  }
-  .navmenu-item-icon > *,
-  .navmenu-sub-icon > * {
-    width: auto;
-    height: 22px;
-    max-height: 22px;
-    font-size: 1.5em;
-  }
-  .navmenu-sub-expand-icon {
-    margin-left: 8px;
-    > * {
-      width: 0.8em;
-      height: 0.8em;
-      transition: transform 0.2s ease-in-out;
-    }
-  }
-`;
-export const HorizontalStyle = styled(NavMenuBase)`
-  padding: 8px 16px;
-  min-width: 50px;
+// .navmenu-root
+export const NavMenuRoot = styled('nav', {
+  shouldForwardProp: prop => prop !== '$bgColor' && prop !== '$textColor'
+})(({
+  $bgColor,
+  $textColor
+}) => ({
+  padding: '8px 16px',
+  minWidth: '50px',
   // FIXME: @zhanghan 这个只是临时的解决方案，会导致 header align right 不能真正的右对齐，需要修改 header 才能真正解决这个问题
-  flex-grow: 100;
+  flexGrow: 100,
+  backgroundColor: $bgColor,
+  color: $textColor,
+  fontSize: '16px'
+}));
 
-  .navmenu-root {
-    display: flex;
-    align-items: center;
-  }
-  /* 顶级菜单间隔 */
-  .navmenu-root > .navmenu-item,
-  .navmenu-root > .navmenu-sub {
-    margin-left: 24px;
-    white-space: nowrap;
-  }
-  .navmenu-root > .navmenu-item:first-of-type,
-  .navmenu-root > .navmenu-sub:first-of-type {
-    margin-left: 0;
-  }
-
-  /* 子级列表 */
-  .navmenu-sub-container {
-    display: none;
-    position: absolute;
-    top: 100%;
-  }
-  .navmenu-sub-list {
-    padding: 16px;
-    border-radius: 4px;
-    background: #fff;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-    .navmenu-item + .navmenu-item {
-      margin-top: 8px;
+// .navmenu-list
+export const NavMenuList = styled('ul')(() => ({
+  listStyle: 'none',
+  margin: 0,
+  padding: 0,
+  display: 'flex',
+  alignItems: 'center',
+  // inline 布局
+  '&.navmenu-list--inline ': {
+    flexDirection: 'column',
+    alignItems: 'stretch'
+  }
+}));
+// 菜单项 .navmenu-item
+export const NavMenuItem = styled('li', {
+  shouldForwardProp: prop => prop !== '$activeTextColor'
+})(({
+  $activeTextColor
+}) => ({
+  display: 'flex',
+  alignItems: 'center',
+  position: 'relative',
+  padding: '0 12px',
+  whiteSpace: 'nowrap',
+  cursor: 'pointer',
+  transition: 'color 0.2s ease-in-out',
+  // 间距调整
+  '&:first-of-type': {
+    paddingLeft: 0
+  },
+  '&:last-of-type': {
+    paddingRight: 0
+  },
+  // 内部链接
+  a: {
+    whiteSpace: 'nowrap',
+    color: 'inherit',
+    textDecoration: 'none',
+    // 扩大点击区域
+    '&::before': {
+      position: 'absolute',
+      top: 0,
+      right: 0,
+      bottom: 0,
+      left: 0,
+      backgroundColor: 'transparent',
+      content: '""'
     }
-  }
-  /* 二级 sub menu */
-  .navmenu-root > .navmenu-sub {
-    white-space: nowrap;
-    > .navmenu-sub-container {
-      left: 50%;
-      transform: translateX(-50%);
-      padding-top: 16px;
+  },
+  // 图标
+  '.navmenu-item__icon': {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginRight: '4px',
+    '& > *': {
+      width: 'auto',
+      height: '22px',
+      maxHeight: '22px',
+      fontSize: '1.5em'
     }
-    &.navmenu-sub--opened > .navmenu-sub-container {
-      display: block;
+  },
+  // 右侧内容
+  '.navmenu-item__content': {
+    height: '32px',
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'flex-start',
+    gap: '5px'
+  },
+  '.navmenu-item__label': {
+    display: 'flex',
+    alignItems: 'center',
+    '&-arrow': {
+      marginLeft: '6px',
+      fontSize: '14px',
+      opacity: 0,
+      transition: 'opacity 0.2s ease-in-out'
     }
-  }
-`;
+  },
+  '.navmenu-item__desc': {
+    fontSize: '14px'
+  },
+  // 悬停状态下
+  '&:hover': {
+    color: $activeTextColor
+  },
+  // 选中状态下
+  '&.navmenu-item--active': {
+    color: $activeTextColor
+  },
+  // Panel 形态下
+  '&.navmenu-item--panel': {
+    padding: '8px 16px',
+    borderRadius: '8px',
+    '.navmenu-item__icon': {
+      width: '32px',
+      height: '32px',
+      marginRight: '16px',
+      border: '1px solid #eff1f5',
+      borderRadius: '4px',
+      color: '#9497a0'
+    },
+    '.navmenu-item__label': {
+      fontSize: '14px',
+      lineHeight: 1,
+      color: '#26292e'
+    },
+    '.navmenu-item__desc': {
+      fontSize: '12px',
+      lineHeight: 1,
+      color: '#9497a0'
+    },
+    '&:hover': {
+      background: '#f9f9fb',
+      transition: 'background 0.2s ease-in-out',
+      '.navmenu-item__label-arrow': {
+        opacity: 1
+      },
+      '.navmenu-item__desc': {
+        color: '#26292e',
+        transition: 'color 0.2s ease-in-out'
+      }
+    },
+    '&.navmenu-item--active': {
+      background: '#f9f9fb'
+    }
+  },
+  // inline 布局中
+  '&.navmenu-item--inline': {
+    margin: 0,
+    padding: '0 16px',
+    minHeight: '48px',
+    lineHeight: '48px',
+    flexWrap: 'wrap'
+  }
+}));
 
-/* inline mode */
-export const InlineStyle = styled(NavMenuBase)`
-  font-size: 16px;
-  .navmenu-root {
-    display: flex;
-    flex-direction: column;
-    align-items: stretch;
-  }
-  .navmenu-item,
-  .navmenu-sub {
-    padding: 0 16px;
-  }
-  & .navmenu-sub {
-    flex-wrap: wrap;
-  }
-  /* 顶级 */
-  .navmenu-root > .navmenu-item,
-  .navmenu-root > .navmenu-sub {
-    line-height: 48px;
-    border-bottom: 1px solid #eee;
-  }
-  /* icon */
-  .navmenu-item-icon,
-  .navmenu-sub-icon {
-    width: 30px;
-    margin: 0;
-  }
-  .navmenu-sub-expand-icon {
-    margin-left: auto;
-  }
-  /* 子级列表 */
-  .navmenu-sub-container {
-    display: none;
-    flex: 1 0 100%;
-    margin: 0 -16px;
-    padding-bottom: 8px;
-    .navmenu-item,
-    .navmenu-sub {
-      line-height: 32px;
+// 包含子菜单的导航项 .navmenu-item .navmenu-sub
+export const NavMenuSub = styled(NavMenuItem)(() => ({
+  '.navmenu-item': {
+    marginLeft: 0
+  },
+  '& .navmenu-sub__container': {
+    visibility: 'hidden',
+    opacity: 0,
+    position: 'absolute',
+    top: '100%',
+    left: '50%',
+    zIndex: 1,
+    transform: 'translateX(-50%)',
+    paddingTop: '16px',
+    transition: 'opacity 0.2s ease-in-out, visibility 0.2s ease-in-out'
+  },
+  '&.navmenu-sub--opened > .navmenu-sub__container': {
+    visibility: 'visible',
+    opacity: 1
+  },
+  // 扩展图标
+  '.navmenu-sub__expand-icon': {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginLeft: '8px',
+    '& > *': {
+      width: '0.8em',
+      height: '0.8em',
+      transition: 'transform 0.2s ease-in-out'
+    },
+    '.navmenu-item--inline &': {
+      marginLeft: 'auto'
     }
-  }
-  .navmenu-sub-list {
-    padding-left: 16px;
-    .navmenu-item,
-    .navmenu-sub {
-      padding-left: 30px;
-      font-size: 13px;
+  },
+  // inline 布局
+  '&.navmenu-item--inline': {
+    '.navmenu-sub__container': {
+      position: 'static',
+      transform: 'none',
+      flex: '1 0 100%',
+      margin: '0 -16px',
+      padding: 0,
+      height: 0,
+      overflow: 'hidden',
+      transition: 'height 0.2s ease-in-out'
+    },
+    '&.navmenu-sub--opened > .navmenu-sub__container': {
+      height: 'auto'
+    },
+    '.navmenu-sub__list': {
+      padding: 0,
+      paddingLeft: '16px',
+      boxShadow: 'none'
     }
   }
-  /* 二级 menu */
-  .navmenu-sub--opened > .navmenu-sub-container {
-    display: block;
-  }
-`;
+}));
+
+// 下拉子菜单 .navmenu-sub-list
+export const NavMenuSubList = styled('ul')(() => ({
+  margin: 0,
+  padding: '16px',
+  borderRadius: '4px',
+  background: '#fff',
+  boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)',
+  '& .navmenu-item + .navmenu-item': {
+    marginTop: '8px'
+  }
+}));

package/lib/NavMenu/sub-item-group.d.ts

@@ -0,0 +1,5 @@
+import { BoxProps } from '@mui/material';
+export interface NavMenuSubItemGroupProps extends BoxProps {
+    label: React.ReactNode;
+}
+export default function NavMenuSubItemGroup({ label, children, className, sx, ...rest }: NavMenuSubItemGroupProps): import("react/jsx-runtime").JSX.Element;

package/lib/NavMenu/sub-item-group.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from '@mui/material';
+import { styled } from '../Theme';
+const Group = styled(Box)`
+  padding: 16px 24px;
+  border-radius: 8px;
+  background-color: white;
+  cursor: auto;
+
+  .group-label {
+    margin-bottom: 8px;
+    color: #71717b;
+    font-size: 12px;
+  }
+
+  .nav {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+`;
+export default function NavMenuSubItemGroup({
+  label,
+  children,
+  className,
+  sx,
+  ...rest
+}) {
+  return /*#__PURE__*/_jsxs(Group, {
+    className: `nav-menu-sub-item-group ${className}`,
+    sx: {
+      ...sx
+    },
+    ...rest,
+    children: [/*#__PURE__*/_jsx(Box, {
+      className: "group-label",
+      children: label
+    }), /*#__PURE__*/_jsx(Box, {
+      component: "ul",
+      className: "nav",
+      children: children
+    })]
+  });
+}

package/lib/RelativeTime/index.js

@@ -31,6 +31,7 @@ dayjs.updateLocale('zh-cn', {
     yy: '%d 年'
   }
 });
+// FIXME: @@ 此处不能真正的将 relativeTime 设置为支持中文
 setDateTool(dayjs);
 export default function RelativeTime({
   value,

package/lib/SessionUser/components/quick-login-item.d.ts

@@ -0,0 +1,19 @@
+export default function QuickLoginItem({ userSession, locale, onClick, }: {
+    onClick?: () => void;
+    locale?: string;
+    userSession: {
+        user: {
+            avatar: string;
+            did: string;
+            fullName: string;
+            role: string;
+            roleTitle: string;
+            email: string;
+        };
+        extra: {
+            walletOS: string;
+            provider: string;
+        };
+        updatedAt: string;
+    };
+}): import("react/jsx-runtime").JSX.Element;

package/lib/SessionUser/components/quick-login-item.js

@@ -0,0 +1,122 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import DID from '@arcblock/ux/lib/DID';
+import RelativeTime from '@arcblock/ux/lib/RelativeTime';
+import WalletOSIcon from '@arcblock/ux/lib/WalletOSIcon';
+import { Box, Chip, Typography } from '@mui/material';
+import { temp as colors } from '@arcblock/ux/lib/Colors';
+import noop from 'lodash/noop';
+import Avatar from '../../Avatar';
+import { getSourceProvider } from '../libs/utils';
+export default function QuickLoginItem({
+  userSession,
+  locale = 'en',
+  onClick = noop
+}) {
+  const isRawWalletAccount = getSourceProvider(userSession?.user) === 'wallet';
+  return /*#__PURE__*/_jsxs(Box, {
+    sx: {
+      borderRadius: 2,
+      p: 2,
+      transition: 'background-color 0.5s',
+      '&:hover, &:active': {
+        backgroundColor: colors.backgroundsBgSubtileHover
+      },
+      display: 'flex',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      cursor: 'pointer',
+      '&:hover': {
+        backgroundColor: colors.surfacePrimarySubtitle
+      },
+      width: '100%',
+      backgroundColor: 'white'
+    },
+    onClick: onClick,
+    children: [/*#__PURE__*/_jsxs(Box, {
+      sx: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: 1.5,
+        flex: 1,
+        overflow: 'hidden'
+      },
+      children: [/*#__PURE__*/_jsx(Avatar, {
+        src: userSession.user.avatar,
+        did: userSession.user.did,
+        size: 44,
+        variant: "circle",
+        shape: "circle"
+      }), /*#__PURE__*/_jsxs(Box, {
+        sx: {
+          flex: 1,
+          overflow: 'hidden'
+        },
+        children: [/*#__PURE__*/_jsxs(Typography, {
+          sx: {
+            fontSize: '16px',
+            fontWeight: 500,
+            display: 'flex',
+            alignItems: 'center',
+            gap: 1,
+            color: colors.textBase
+          },
+          children: [userSession.user.fullName, /*#__PURE__*/_jsx(Chip, {
+            label: userSession.user?.roleTitle || userSession.user?.role,
+            size: "small",
+            variant: "outlined",
+            sx: () => ({
+              height: 'auto',
+              fontWeight: 'bold',
+              fontSize: '12px',
+              borderColor: colors.lineBorderStrong,
+              color: colors.textSubtitle
+            })
+          })]
+        }), isRawWalletAccount ? /*#__PURE__*/_jsxs(Box, {
+          sx: {
+            display: 'flex',
+            alignItems: 'center',
+            gap: 0.5
+          },
+          children: [/*#__PURE__*/_jsx(WalletOSIcon, {
+            provider: userSession?.extra?.provider,
+            walletOS: userSession?.extra?.walletOS,
+            color: colors.textSubtitle
+          }), /*#__PURE__*/_jsx(DID
+          // @ts-ignore
+          , {
+            locale: locale,
+            did: userSession.user.did,
+            size: 12,
+            sx: {
+              lineHeight: 1,
+              fontSize: '12px',
+              mt: 0.5,
+              '& span.arc-avatar-did-motif': {
+                display: 'none !important'
+              }
+            },
+            compact: true
+          })]
+        }) : /*#__PURE__*/_jsx(Typography, {
+          sx: {
+            fontSize: '12px',
+            color: colors.textSubtitle
+          },
+          children: userSession.user.email
+        })]
+      })]
+    }), userSession.updatedAt && /*#__PURE__*/_jsx(Box, {
+      component: "span",
+      sx: {
+        color: colors.textMuted,
+        fontSize: '12px',
+        flexShrink: 0
+      },
+      children: /*#__PURE__*/_jsx(RelativeTime, {
+        value: userSession.updatedAt,
+        locale: locale
+      })
+    })]
+  });
+}

package/lib/SessionUser/components/un-login.d.ts

@@ -4,5 +4,6 @@ export interface UnLoginProps {
     onLogin?: () => void;
     size?: number;
     dark?: false | true;
+    locale?: string;
 }
-export default function UnLogin({ session, onLogin, size, dark }: UnLoginProps): import("react/jsx-runtime").JSX.Element;
+export default function UnLogin({ session, onLogin, size, dark, locale }: UnLoginProps): import("react/jsx-runtime").JSX.Element;