@arcblock/ux 2.13.70 → 3.0.1

package/lib/UserCard/Content/clock.js

@@ -1,82 +1,96 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Tooltip from '@mui/material/Tooltip';
-import Typography from '@mui/material/Typography';
-import Box from '@mui/material/Box';
-import { useMemoizedFn } from 'ahooks';
-import useClock from '../../hooks/use-clock';
-import { translate } from '../../Locale/util';
-import { useLocaleContext } from '../../Locale/context';
-const translations = {
+import { jsxs as t, jsx as a } from "react/jsx-runtime";
+import { Box as c, Typography as l, Tooltip as f } from "@mui/material";
+import { useMemoizedFn as p } from "ahooks";
+import h from "../../hooks/use-clock.js";
+import { translate as d } from "../../Locale/util.js";
+import { useLocaleContext as x } from "../../Locale/context.js";
+const u = {
   en: {
-    localTime: 'Local Time',
+    localTime: "Local Time",
     timezonePhase: {
-      dawn: 'AM',
-      morning: 'AM',
-      afternoon: 'PM',
-      night: 'PM'
+      dawn: "AM",
+      morning: "AM",
+      afternoon: "PM",
+      night: "PM"
     }
   },
   zh: {
-    localTime: '本地时间',
+    localTime: "本地时间",
     timezonePhase: {
-      dawn: '凌晨',
-      morning: '上午',
-      afternoon: '下午',
-      night: '晚上'
+      dawn: "凌晨",
+      morning: "上午",
+      afternoon: "下午",
+      night: "晚上"
     }
   }
 };
-export default function Clock({
-  value,
-  ...props
-}) {
-  const {
-    locale
-  } = useLocaleContext() || {
-    locale: 'en'
-  };
-  const t = useMemoizedFn((key, data = {}) => {
-    return translate(translations, key, locale, 'en', data);
-  });
-  const timeInfo = useClock(value, locale);
-  return /*#__PURE__*/_jsxs(Box, {
-    display: "flex",
-    alignItems: "center",
-    gap: 1,
-    flex: 1,
-    justifyContent: "flex-start",
-    overflow: "hidden",
-    width: "100%",
-    children: [/*#__PURE__*/_jsx(Typography, {
-      ...props,
-      noWrap: true,
-      component: "span",
+function P({ value: n, ...i }) {
+  const { locale: e } = x() || { locale: "en" }, r = p((m, s = {}) => d(u, m, e, "en", s)), o = h(n, e);
+  return /* @__PURE__ */ t(
+    c,
+    {
       sx: {
-        flex: '0 1 auto',
-        minWidth: 0,
-        ...props.sx
+        display: "flex",
+        alignItems: "center",
+        gap: 1,
+        flex: 1,
+        justifyContent: "flex-start",
+        overflow: "hidden",
+        width: "100%"
       },
-      children: value
-    }), /*#__PURE__*/_jsx(Tooltip, {
-      enterDelay: 200,
-      title: /*#__PURE__*/_jsxs("span", {
-        children: [t('localTime'), " ", timeInfo.fullDateTime]
-      }),
-      placement: "top",
-      arrow: true,
-      children: /*#__PURE__*/_jsxs(Typography, {
-        component: "span",
-        fontSize: 14,
-        noWrap: true,
-        sx: {
-          whiteSpace: 'nowrap',
-          overflow: 'hidden',
-          textOverflow: 'ellipsis',
-          flex: '0 0 auto',
-          maxWidth: '100%'
-        },
-        children: ["(", locale === 'zh' ? `${t(`timezonePhase.${timeInfo.phase}`)} ` : '', timeInfo.formattedTime, ")"]
-      })
-    })]
-  });
-}
+      children: [
+        /* @__PURE__ */ a(
+          l,
+          {
+            ...i,
+            noWrap: !0,
+            component: "span",
+            sx: {
+              flex: "0 1 auto",
+              minWidth: 0,
+              ...i.sx
+            },
+            children: n
+          }
+        ),
+        /* @__PURE__ */ a(
+          f,
+          {
+            enterDelay: 200,
+            title: /* @__PURE__ */ t("span", { children: [
+              r("localTime"),
+              " ",
+              o.fullDateTime
+            ] }),
+            placement: "top",
+            arrow: !0,
+            children: /* @__PURE__ */ t(
+              l,
+              {
+                component: "span",
+                noWrap: !0,
+                sx: {
+                  fontSize: 14,
+                  whiteSpace: "nowrap",
+                  overflow: "hidden",
+                  textOverflow: "ellipsis",
+                  flex: "0 0 auto",
+                  maxWidth: "100%"
+                },
+                children: [
+                  "(",
+                  e === "zh" ? `${r(`timezonePhase.${o.phase}`)} ` : "",
+                  o.formattedTime,
+                  ")"
+                ]
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  P as default
+};

package/lib/UserCard/Content/minimal.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { default as React } from 'react';
 import { User, UserCardProps } from '../types';
 interface MinimalContentProps extends UserCardProps {
     user: User;

package/lib/UserCard/Content/minimal.js

@@ -1,75 +1,85 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { memo } from 'react';
-import { Typography, Box } from '@mui/material';
-import DID from '../../DID';
-import TooltipAvatar from './tooltip-avatar';
-import { renderTopRight } from '../components';
-import ShortenLabel from './shorten-label';
-function MinimalContent(props) {
+import { jsxs as r, jsx as t } from "react/jsx-runtime";
+import { memo as x } from "react";
+import { Box as o, Typography as g } from "@mui/material";
+import { DID as y } from "../../DID/index.js";
+import C from "./tooltip-avatar.js";
+import { renderTopRight as b } from "../components.js";
+import v from "./shorten-label.js";
+function W(n) {
   const {
-    user,
-    showDid,
-    didProps,
-    avatarSize,
-    shouldShowHoverCard,
-    renderCardContent,
-    renderTopRightContent,
-    topRightMaxWidth,
-    avatarProps,
-    shortenLabelProps,
-    renderName,
-    ...rest
-  } = props;
-  return /*#__PURE__*/_jsxs(Box, {
-    display: "flex",
-    justifyContent: "space-between",
-    alignItems: "center",
-    className: "user-card__avatar-content",
-    children: [/*#__PURE__*/_jsxs(Box, {
-      display: "flex",
-      justifyContent: "flex-start",
-      alignItems: "center",
-      gap: 1,
-      flex: 1,
-      minWidth: 0,
-      children: [/*#__PURE__*/_jsx(TooltipAvatar, {
-        user: user,
-        avatarSize: avatarSize,
-        shouldShowHoverCard: shouldShowHoverCard,
-        renderCardContent: renderCardContent,
-        avatarProps: avatarProps,
-        ...rest
-      }), /*#__PURE__*/_jsxs(Box, {
-        children: [/*#__PURE__*/_jsx(Typography, {
-          variant: "subtitle1",
-          fontWeight: 500,
-          color: "text.primary",
-          className: "user-card__full-name-label",
-          fontSize: 18,
-          noWrap: true,
-          sx: {
-            lineHeight: 1.1
-          },
-          children: renderName ? renderName(user) : /*#__PURE__*/_jsx(ShortenLabel, {
+    user: e,
+    showDid: a,
+    didProps: l,
+    avatarSize: s,
+    shouldShowHoverCard: d,
+    renderCardContent: m,
+    renderTopRightContent: p,
+    topRightMaxWidth: c,
+    avatarProps: f,
+    shortenLabelProps: h,
+    renderName: i,
+    ...u
+  } = n;
+  return /* @__PURE__ */ r(
+    o,
+    {
+      className: "user-card__avatar-content",
+      sx: {
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center"
+      },
+      children: [
+        /* @__PURE__ */ r(
+          o,
+          {
             sx: {
-              fontWeight: 500
+              display: "flex",
+              justifyContent: "flex-start",
+              alignItems: "center",
+              gap: 1,
+              flex: 1,
+              minWidth: 0
             },
-            ...shortenLabelProps,
-            children: user.fullName || user.email || user.did
-          })
-        }), showDid && user.did ? /*#__PURE__*/_jsx(DID, {
-          did: user.did,
-          size: 14,
-          copyable: true,
-          compact: true,
-          locale: "en",
-          sx: {
-            lineHeight: 1.5
-          },
-          ...(didProps ?? {})
-        }) : null]
-      })]
-    }), renderTopRight(renderTopRightContent, topRightMaxWidth)]
-  });
+            children: [
+              /* @__PURE__ */ t(
+                C,
+                {
+                  user: e,
+                  avatarSize: s,
+                  shouldShowHoverCard: d,
+                  renderCardContent: m,
+                  avatarProps: f,
+                  ...u
+                }
+              ),
+              /* @__PURE__ */ r(o, { children: [
+                /* @__PURE__ */ t(
+                  g,
+                  {
+                    variant: "subtitle1",
+                    className: "user-card__full-name-label",
+                    noWrap: !0,
+                    sx: {
+                      fontWeight: 500,
+                      color: "text.primary",
+                      fontSize: 18,
+                      lineHeight: 1.1
+                    },
+                    children: i ? i(e) : /* @__PURE__ */ t(v, { sx: { fontWeight: 500 }, ...h, children: e.fullName || e.email || e.did })
+                  }
+                ),
+                a && e.did ? /* @__PURE__ */ t(y, { did: e.did, size: 14, copyable: !0, compact: !0, locale: "en", sx: { lineHeight: 1.5 }, ...l ?? {} }) : null
+              ] })
+            ]
+          }
+        ),
+        b(p, c)
+      ]
+    }
+  );
 }
-export default /*#__PURE__*/memo(MinimalContent);
+const D = x(W);
+export {
+  D as default
+};

package/lib/UserCard/Content/shorten-label.js

@@ -1,37 +1,13 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Tooltip, Typography } from '@mui/material';
-import { useMemo } from 'react';
-function shortenString(str, maxLength = 10) {
-  if (!str) return '';
-  if (str.length <= maxLength) return str;
-  return `${str.slice(0, maxLength - 1)}...${str.slice(-2)}`;
+import { jsx as e } from "react/jsx-runtime";
+import { Typography as f, Tooltip as u } from "@mui/material";
+import { useMemo as p } from "react";
+function l(o, t = 10) {
+  return o ? o.length <= t ? o : `${o.slice(0, t - 1)}...${o.slice(-2)}` : "";
 }
-function ShortenLabel({
-  children,
-  maxLength = 10,
-  sx = undefined,
-  hiddenTip = false
-}) {
-  const shortenedText = useMemo(() => shortenString(children, maxLength), [children, maxLength]);
-  if (children?.length <= maxLength) {
-    return /*#__PURE__*/_jsx(Typography, {
-      sx: sx,
-      children: children
-    });
-  }
-  if (hiddenTip) {
-    return /*#__PURE__*/_jsx(Typography, {
-      sx: sx,
-      children: shortenedText
-    });
-  }
-  return /*#__PURE__*/_jsx(Tooltip, {
-    title: children,
-    placement: "top",
-    children: /*#__PURE__*/_jsx(Typography, {
-      sx: sx,
-      children: shortenedText
-    })
-  });
+function T({ children: o, maxLength: t = 10, sx: r = void 0, hiddenTip: n = !1 }) {
+  const i = p(() => l(o, t), [o, t]);
+  return (o == null ? void 0 : o.length) <= t ? /* @__PURE__ */ e(f, { sx: r, children: o }) : n ? /* @__PURE__ */ e(f, { sx: r, children: i }) : /* @__PURE__ */ e(u, { title: o, placement: "top", children: /* @__PURE__ */ e(f, { sx: r, children: i }) });
 }
-export default ShortenLabel;
+export {
+  T as default
+};

package/lib/UserCard/Content/tooltip-avatar.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { default as React } from 'react';
 import { User, UserCardProps } from '../types';
 interface TooltipAvatarProps extends UserCardProps {
     user: User;

package/lib/UserCard/Content/tooltip-avatar.js

@@ -1,58 +1,50 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
-import { Tooltip } from '@mui/material';
-import Zoom from '@mui/material/Zoom';
-import { renderAvatar } from '../components';
-/**
- * 统一处理头像的Tooltip显示组件
- * 根据条件显示普通Tooltip、自定义Tooltip内容或无Tooltip的头像
- */
-function TooltipAvatar({
-  user,
-  avatarSize,
-  shouldShowHoverCard,
-  renderCardContent,
-  tooltipTitle,
-  tooltipProps,
-  avatarProps,
-  onAvatarClick
+import { jsx as n } from "react/jsx-runtime";
+import { Tooltip as l, Zoom as f } from "@mui/material";
+import { renderAvatar as c } from "../components.js";
+function d({
+  user: i,
+  avatarSize: m,
+  shouldShowHoverCard: e,
+  renderCardContent: o,
+  tooltipTitle: t,
+  tooltipProps: a,
+  avatarProps: p,
+  onAvatarClick: s
 }) {
-  const avatarElement = renderAvatar(user, avatarSize, avatarProps, onAvatarClick, shouldShowHoverCard || !!tooltipTitle);
-  // 使用普通文本Tooltip
-  if (tooltipTitle) {
-    return /*#__PURE__*/_jsx(Tooltip, {
+  const r = c(
+    i,
+    m,
+    p,
+    s,
+    e || !!t
+  );
+  return t ? /* @__PURE__ */ n(l, { enterDelay: 200, title: t, placement: "bottom", ...a ?? {}, children: r }) : e ? /* @__PURE__ */ n(
+    l,
+    {
       enterDelay: 200,
-      title: tooltipTitle,
+      title: o ? o() : null,
       placement: "bottom",
-      ...(tooltipProps ?? {}),
-      children: avatarElement
-    });
-  }
-
-  // 使用自定义内容Tooltip
-  if (shouldShowHoverCard) {
-    return /*#__PURE__*/_jsx(Tooltip, {
-      enterDelay: 200,
-      title: renderCardContent ? renderCardContent() : null,
-      placement: "bottom",
-      arrow: false,
-      TransitionComponent: Zoom,
-      PopperProps: {
-        sx: {
-          '& .MuiTooltip-tooltip': {
-            backgroundColor: 'transparent',
-            p: 0,
-            maxWidth: 500,
-            zIndex: 1000
+      arrow: !1,
+      ...a ?? {},
+      slotProps: {
+        popper: {
+          sx: {
+            "& .MuiTooltip-tooltip": {
+              backgroundColor: "transparent",
+              p: 0,
+              maxWidth: 500,
+              zIndex: 1e3
+            }
           }
         }
       },
-      ...(tooltipProps ?? {}),
-      children: avatarElement
-    });
-  }
-
-  // 无Tooltip
-  return avatarElement;
+      slots: {
+        transition: f
+      },
+      children: r
+    }
+  ) : r;
 }
-export default TooltipAvatar;
+export {
+  d as default
+};

package/lib/UserCard/UserCard.stories.d.ts

@@ -0,0 +1,18 @@
+export { default as Basic } from './demo/basic';
+export { default as AvatarWithHover } from './demo/avatarWithHover';
+export { default as DetailedCard } from './demo/detailedCard';
+export { default as DidControl } from './demo/didControl';
+export { default as TopRightContent } from './demo/topRightContent';
+export { default as CustomFooter } from './demo/customFooter';
+export { default as DidOnlyAvatar } from './demo/did-only-avatar';
+declare namespace _default {
+    let title: string;
+    namespace parameters {
+        namespace docs {
+            namespace description {
+                let component: string;
+            }
+        }
+    }
+}
+export default _default;

package/lib/UserCard/components.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { default as React } from 'react';
 import { User, UserCardProps } from './types';
 export declare const renderAvatar: (user: User, avatarSize?: number, avatarProps?: UserCardProps["avatarProps"], onAvatarClick?: UserCardProps["onAvatarClick"], shouldShowHoverCard?: boolean) => import("react/jsx-runtime").JSX.Element;
 export declare const renderTopRight: (renderTopRightContent: (() => React.ReactNode) | undefined, topRightMaxWidth?: number) => import("react/jsx-runtime").JSX.Element | null;

package/lib/UserCard/components.js

@@ -1,70 +1,57 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
-import Box from '@mui/material/Box';
-import MaterialAvatar from '@mui/material/Avatar';
-import Avatar from '../Avatar';
-import { createNameOnlyAvatar } from './utils';
-
-// 渲染头像
-export const renderAvatar = (user, avatarSize = 48, avatarProps = undefined, onAvatarClick = undefined, shouldShowHoverCard = false) => {
-  const onClick = e => {
-    onAvatarClick?.(user, e);
+import { jsx as a } from "react/jsx-runtime";
+import { Box as o, Avatar as f } from "@mui/material";
+import p from "../Avatar/index.js";
+import { createNameOnlyAvatar as u } from "./utils.js";
+const _ = (r, t = 48, n = void 0, e = void 0, s = !1) => {
+  const c = (i) => {
+    e == null || e(r, i);
   };
-  // 如果用户没有头像，则显示名称首字母头像
-  if (!user.avatar) {
-    const avatarContent = createNameOnlyAvatar(user);
-    // 从 avatarProps 中提取 MUI 的 Avatar 支持的基本 props
-    // className, style 等基本 React 属性
-    const {
-      className,
-      style,
-      alt
-    } = avatarProps || {};
-    return /*#__PURE__*/_jsx(MaterialAvatar, {
-      onClick: onClick,
-      className: className,
-      style: style,
-      alt: alt,
-      sx: {
-        width: avatarSize,
-        height: avatarSize,
-        fontSize: avatarSize * 0.4,
-        cursor: shouldShowHoverCard || onAvatarClick ? 'pointer' : 'default'
-      },
-      variant: "circular",
-      children: avatarContent
-    });
+  if (!r.avatar) {
+    const i = u(r), { className: d, style: l, alt: m } = n || {};
+    return /* @__PURE__ */ a(
+      f,
+      {
+        onClick: c,
+        className: d,
+        style: l,
+        alt: m,
+        sx: {
+          width: t,
+          height: t,
+          fontSize: t * 0.4,
+          cursor: s || e ? "pointer" : "default"
+        },
+        variant: "circular",
+        children: i
+      }
+    );
   }
-
-  // 显示用户头像
-  return /*#__PURE__*/_jsx(Box, {
-    className: "user-card__avatar",
-    display: "flex",
-    children: /*#__PURE__*/_jsx(Avatar, {
-      size: avatarSize,
-      did: user.did,
-      variant: "circle",
-      style: {
-        cursor: shouldShowHoverCard || onAvatarClick ? 'pointer' : 'default'
-      },
-      onClick: onClick,
-      src: user.avatar,
-      alt: user.fullName || '',
-      ...(avatarProps || {})
-    })
-  });
-};
-
-// 渲染右上角内容
-export const renderTopRight = (renderTopRightContent, topRightMaxWidth = 120) => {
-  if (renderTopRightContent) {
-    return /*#__PURE__*/_jsx(Box, {
+  return /* @__PURE__ */ a(
+    o,
+    {
+      className: "user-card__avatar",
       sx: {
-        maxWidth: topRightMaxWidth
+        display: "flex"
       },
-      className: "user-card__top-right-content",
-      children: renderTopRightContent()
-    });
-  }
-  return null;
-};
+      children: /* @__PURE__ */ a(
+        p,
+        {
+          size: t,
+          did: r.did,
+          variant: "circle",
+          style: {
+            cursor: s || e ? "pointer" : "default"
+          },
+          onClick: c,
+          src: r.avatar,
+          alt: r.fullName || "",
+          ...n || {}
+        }
+      )
+    }
+  );
+}, g = (r, t = 120) => r ? /* @__PURE__ */ a(o, { sx: { maxWidth: t }, className: "user-card__top-right-content", children: r() }) : null;
+export {
+  _ as renderAvatar,
+  g as renderTopRight
+};

package/lib/UserCard/index.d.ts

@@ -1,5 +1,4 @@
-import type { User } from './types';
-import { UserCardProps } from './types';
+import { User, UserCardProps } from './types';
 export declare function createNameOnlyAvatar(user: User): string | null;
 declare function UserCard(props: UserCardProps): import("react/jsx-runtime").JSX.Element;
 export default UserCard;