@arcblock/ux 2.13.69 → 3.0.0

package/lib/Address/did-address.js

@@ -1,164 +1,112 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import '@fontsource/ubuntu-mono/400.css';
-import { Check as CheckIcon } from '@mui/icons-material';
-import { Box, Tooltip } from '@mui/material';
-import copy from 'copy-to-clipboard';
-import noop from 'lodash/noop';
-import CopyIcon from '@arcblock/icons/lib/Copy';
-import React, { forwardRef, useImperativeHandle, useRef, useState } from 'react';
-import { styled } from '../Theme';
-import { getFontSize } from '../Util';
-import CompactText from './compact-text';
-const translations = {
+import { jsx as o, jsxs as P } from "react/jsx-runtime";
+import "@fontsource/ubuntu-mono/400.css";
+import { Check as B } from "@mui/icons-material";
+import { Box as l, Tooltip as C } from "@mui/material";
+import E from "copy-to-clipboard";
+import w from "lodash/noop";
+import F from "@arcblock/icons/lib/Copy";
+import { useState as S, useRef as g, useImperativeHandle as A } from "react";
+import { styled as H } from "../Theme/index.js";
+import { getFontSize as L } from "../Util/index.js";
+import M from "./compact-text.js";
+const i = {
   en: {
-    copy: 'Click To Copy',
-    copied: 'Copied!'
+    copy: "Click To Copy",
+    copied: "Copied!"
   },
   zh: {
-    copy: '点击复制',
-    copied: '已复制!'
+    copy: "点击复制",
+    copied: "已复制!"
   }
 };
-/**
- * DidAddress 组件 (新版设计)
- *
- * - 样式调整
- * - click-to-copy 调整
- * - 长文本截断处理 (Ellipsis)
- * - 支持 inline 或 block 的显示方式
- * - 支持紧凑模式, 该模式下:
- *   - 占用宽度较小, 因此不考虑水平空间不够用的情况, 且忽略末尾省略号
- *   - 对于多层元素结构的 children, 保持元素结构, 将最内层 text 替换为 CompactText 组件
- *   - 为保证 copy 功能正常工作, 原 children 始终渲染, 但在紧凑式下会隐藏
- *   - 可配合 useMediaQuery 使用
- */
-const DidAddress = /*#__PURE__*/forwardRef((props, ref) => {
+function _({
+  ref: e,
+  ...v
+}) {
   const {
-    component = 'span',
-    size = 0,
-    copyable = true,
-    showCopyButtonInTooltip = false,
-    children = null,
-    content = '',
-    prepend = null,
-    append = null,
-    compact = false,
-    startChars = 6,
-    endChars = 6,
-    locale: originalLocale = 'en',
-    ...rest
-  } = props;
-  let locale = originalLocale;
-  if (!translations[locale]) {
-    locale = 'en';
-  }
-  const [copied, setCopied] = useState(false);
-  const textRef = useRef(null);
-  const rootRef = useRef(null);
-  const handleCopy = () => {
-    copy(content || textRef.current?.textContent || '');
-    setCopied(true);
-    // 恢复 copied 状态
-    setTimeout(() => {
-      setCopied(false);
+    component: b = "span",
+    size: z = 0,
+    copyable: r = !0,
+    showCopyButtonInTooltip: $ = !1,
+    children: a = null,
+    content: k = "",
+    prepend: N = null,
+    append: T = null,
+    compact: d = !1,
+    startChars: D = 6,
+    endChars: R = 6,
+    locale: j = "en",
+    ...I
+  } = v;
+  let n = j;
+  i[n] || (n = "en");
+  const [s, m] = S(!1), u = g(null), c = g(null), f = () => {
+    var t;
+    E(k || ((t = u.current) == null ? void 0 : t.textContent) || ""), m(!0), setTimeout(() => {
+      m(!1);
     }, 1500);
+  }, p = (t) => {
+    t.stopPropagation(), t.preventDefault(), f();
   };
-  const onCopy = e => {
-    e.stopPropagation();
-    e.preventDefault();
-    handleCopy();
-  };
-  useImperativeHandle(ref, () => new Proxy({
-    copy: handleCopy,
-    getEl: () => rootRef.current
-  }, {
-    get(target, key) {
-      return target[key] || rootRef.current?.[key];
-    }
-  }));
-  let copyElement = null;
-  if (copyable) {
-    copyElement = /*#__PURE__*/_jsx("span", {
-      className: "did-address-copy-wrapper",
-      title: copied ? '' : translations[locale].copy,
-      children: copied ? /*#__PURE__*/_jsx(Tooltip, {
-        title: translations[locale].copied,
-        placement: "bottom",
-        arrow: true,
-        open: copied,
-        children: /*#__PURE__*/_jsx(CheckIcon, {
-          className: "did-address-copy",
-          sx: {
-            color: 'success.main'
-          }
-        })
-      }) :
-      /*#__PURE__*/
-      /* title prop 直接加在 icon 上不生效 */
-      _jsx(CopyIcon, {
-        className: "did-address-copy",
-        width: "1em",
-        height: "1em",
-        onClick: onCopy
-      })
-    });
-  }
-  return /*#__PURE__*/_jsxs(Root, {
-    as: component,
-    size: size,
-    ...rest,
-    ref: rootRef,
-    children: [prepend, /*#__PURE__*/_jsx(Box, {
-      sx: {
-        display: 'none'
+  A(
+    e,
+    () => new Proxy(
+      {
+        copy: f,
+        getEl: () => c.current
       },
-      ref: textRef,
-      children: children
-    }), /*#__PURE__*/_jsx(Tooltip, {
-      title: copyable ? '' : translations[locale].copied,
-      placement: "bottom",
-      arrow: true,
-      open: copied,
-      children: compact ? /*#__PURE__*/_jsx(Box, {
+      {
+        get(t, x) {
+          var h;
+          return t[x] || ((h = c.current) == null ? void 0 : h[x]);
+        }
+      }
+    )
+  );
+  let y = null;
+  return r && (y = /* @__PURE__ */ o("span", { className: "did-address-copy-wrapper", title: s ? "" : i[n].copy, children: s ? /* @__PURE__ */ o(C, { title: i[n].copied, placement: "bottom", arrow: !0, open: s, children: /* @__PURE__ */ o(B, { className: "did-address-copy", sx: { color: "success.main" } }) }) : (
+    /* title prop 直接加在 icon 上不生效 */
+    /* @__PURE__ */ o(F, { className: "did-address-copy", width: "1em", height: "1em", onClick: p })
+  ) })), /* @__PURE__ */ P(U, { as: b, size: z, ...I, ref: c, children: [
+    N,
+    /* @__PURE__ */ o(l, { sx: { display: "none" }, ref: u, children: a }),
+    /* @__PURE__ */ o(C, { title: r ? "" : i[n].copied, placement: "bottom", arrow: !0, open: s, children: d ? /* @__PURE__ */ o(
+      l,
+      {
         component: "span",
         className: "did-address-text",
         sx: {
-          cursor: copyable ? 'unset' : 'pointer'
+          cursor: r ? "unset" : "pointer"
         },
-        onDoubleClick: copyable ? noop : onCopy,
-        children: /*#__PURE__*/_jsx(CompactText, {
-          startChars: startChars,
-          endChars: endChars,
-          showCopyButtonInTooltip: showCopyButtonInTooltip,
-          children: children
-        })
-      }) : /*#__PURE__*/_jsx(Box, {
+        onDoubleClick: r ? w : p,
+        children: /* @__PURE__ */ o(M, { startChars: D, endChars: R, showCopyButtonInTooltip: $, children: a })
+      }
+    ) : /* @__PURE__ */ o(
+      l,
+      {
         component: "span",
         className: "did-address-text did-address-truncate",
         sx: {
-          display: compact ? 'none' : 'inline',
-          cursor: copyable ? 'unset' : 'pointer'
+          display: d ? "none" : "inline",
+          cursor: r ? "unset" : "pointer"
         },
-        onDoubleClick: copyable ? noop : onCopy,
-        children: children
-      })
-    }), copyElement, append]
-  });
-});
-export default DidAddress;
-const Root = styled(Box, {
-  shouldForwardProp: prop => prop !== 'inline'
-})`
+        onDoubleClick: r ? w : p,
+        children: a
+      }
+    ) }),
+    y,
+    T
+  ] });
+}
+const U = H(l, { shouldForwardProp: (e) => e !== "inline" })`
   font-family: 'Ubuntu Mono', monospace;
   && {
-    display: ${({
-  inline
-}) => inline ? 'inline-flex' : 'flex'};
+    display: ${({ inline: e }) => e ? "inline-flex" : "flex"};
     align-items: center;
     max-width: 100%;
     overflow: hidden;
     color: #ccc;
-    font-size: ${props => getFontSize(props.size)};
+    font-size: ${(e) => L(e.size)};
     font-weight: 400;
 
     svg {
@@ -167,9 +115,7 @@ const Root = styled(Box, {
   }
 
   .did-address-text {
-    color: ${({
-  theme
-}) => theme.palette.text.secondary};
+    color: ${({ theme: e }) => e.palette.text.secondary};
   }
   /* truncate string with ellipsis */
   .did-address-truncate {
@@ -189,22 +135,19 @@ const Root = styled(Box, {
   .did-address-copy {
     flex: 0 0 auto;
     font-size: 1em;
-    color: ${({
-  theme
-}) => theme.palette.text.secondary};
+    color: ${({ theme: e }) => e.palette.text.secondary};
     cursor: pointer;
   }
 
   /* link */
   a {
-    color: ${({
-  theme
-}) => theme.palette.text.secondary};
+    color: ${({ theme: e }) => e.palette.text.secondary};
   }
   &:hover a {
-    color: ${({
-  theme
-}) => theme.palette.text.primary};
+    color: ${({ theme: e }) => e.palette.text.primary};
     text-decoration: underline;
   }
-`;
+`;
+export {
+  _ as default
+};

package/lib/Address/index.d.ts

@@ -1,6 +1,8 @@
-import { HTMLDidAddressElement, IDidAddressProps } from './did-address';
+import { IDidAddressProps } from './did-address';
 export interface IDidAddressWrapper extends IDidAddressProps {
     responsive?: true | false;
 }
-declare const DidAddressWrapper: import("react").ForwardRefExoticComponent<Omit<IDidAddressWrapper, "ref"> & import("react").RefAttributes<HTMLDidAddressElement>>;
+declare function DidAddressWrapper({ ref, responsive, ...rest }: IDidAddressWrapper & {
+    ref?: React.Ref<unknown>;
+}): import("react/jsx-runtime").JSX.Element;
 export default DidAddressWrapper;

package/lib/Address/index.js

@@ -1,20 +1,13 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
-import DidAddress from './did-address';
-import ResponsiveDidAddress from './responsive-did-address';
-const DidAddressWrapper = /*#__PURE__*/forwardRef(({
-  responsive = true,
-  ...rest
-}, ref) => {
-  if (responsive) {
-    return /*#__PURE__*/_jsx(ResponsiveDidAddress, {
-      ...rest,
-      ref: ref
-    });
-  }
-  return /*#__PURE__*/_jsx(DidAddress, {
-    ...rest,
-    ref: ref
-  });
-});
-export default DidAddressWrapper;
+import { jsx as e } from "react/jsx-runtime";
+import o from "./did-address.js";
+import s from "./responsive-did-address.js";
+function f({
+  ref: r,
+  responsive: i = !0,
+  ...d
+}) {
+  return i ? /* @__PURE__ */ e(s, { ...d, ref: r }) : /* @__PURE__ */ e(o, { ...d, ref: r });
+}
+export {
+  f as default
+};

package/lib/Address/responsive-did-address.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import { HTMLDidAddressElement, IDidAddressProps } from './did-address';
+import { default as React } from 'react';
+import { IDidAddressProps } from './did-address';
 /**
  * 根据父容器宽度自动切换 compact 模式
  *
@@ -9,8 +9,9 @@ import { HTMLDidAddressElement, IDidAddressProps } from './did-address';
  * - 组件 mounted 时记录 did address 的 full-width (非 compact 模式的宽度)
  * - 监听容器宽度变化, 当容器宽度变化时, 对比容器宽度和 did address full-width, => 切换 compact 模式
  */
-declare const ResponsiveDidAddress: React.ForwardRefExoticComponent<Omit<IResponsiveDidAddressProps, "ref"> & React.RefAttributes<HTMLDidAddressElement>>;
-export default ResponsiveDidAddress;
+export default function ResponsiveDidAddress({ ref, style, className, component, size, ...rest }: IResponsiveDidAddressProps & {
+    ref?: React.Ref<unknown>;
+}): import("react/jsx-runtime").JSX.Element;
 export interface IResponsiveDidAddressProps extends IDidAddressProps {
     style?: React.CSSProperties;
     className?: string;

package/lib/Address/responsive-did-address.js

@@ -1,126 +1,89 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useDebounceFn, useLatest } from 'ahooks';
-import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
-import { Box } from '@mui/material';
-import { styled } from '../Theme';
-import DidAddress from './did-address';
-import { getFontSize } from '../Util';
-
-/**
- * 根据父容器宽度自动切换 compact 模式
- *
- * 实现逻辑:
- * - DidAddress 外层包裹一个容器, 其宽度自动撑满父容器宽度 (即这个容器需要是块级元素或 100% 宽的 inline-block)
- * - DidAddress 本身以 inline 形式渲染 (方便探测 did-address 的 full-width)
- * - 组件 mounted 时记录 did address 的 full-width (非 compact 模式的宽度)
- * - 监听容器宽度变化, 当容器宽度变化时, 对比容器宽度和 did address full-width, => 切换 compact 模式
- */
-const ResponsiveDidAddress = /*#__PURE__*/forwardRef(({
-  style,
-  className,
-  component = 'span',
-  size = 0,
-  ...rest
-}, ref) => {
-  const [compact, setCompact] = useState(false);
-  const isCompact = useLatest(compact);
-  // did address 完整显示时的宽度
-  const [addressFullWidth, setAddressFullWidth] = useState(null);
-  const [containerWidth, setContainerWidth] = useState(null);
-  const [loading, setLoading] = useState(true);
-  const {
-    run: delaySetLoadingFalse
-  } = useDebounceFn(() => setLoading(false), {
+import { jsxs as E, jsx as y } from "react/jsx-runtime";
+import { useLatest as L, useDebounceFn as $ } from "ahooks";
+import { useState as r, useRef as b, useImperativeHandle as j, useEffect as R } from "react";
+import { Box as k } from "@mui/material";
+import { styled as F } from "../Theme/index.js";
+import P from "./did-address.js";
+import { getFontSize as B } from "../Util/index.js";
+function Q({
+  ref: t,
+  style: A,
+  className: D,
+  component: l = "span",
+  size: d = 0,
+  ...p
+}) {
+  const [h, S] = r(!1), z = L(h), [f, m] = r(null), [u, w] = r(null), [a, C] = r(!0), { run: x } = $(() => C(!1), {
     wait: 50
-  });
-  const containerRef = useRef(null);
-  const innerRef = useRef(null);
-  useImperativeHandle(ref, () => new Proxy({}, {
-    get(target, key) {
-      return innerRef.current?.[key];
-    }
-  }));
-
-  // 存储完整显示时 address 组件的宽度
-  useEffect(() => {
-    const innerWidth = innerRef.current?.offsetWidth || 0;
-    let innerObserver = null;
-    let containerObserver = null;
-
-    // 初始化宽度
-    setAddressFullWidth(innerWidth);
-    setContainerWidth(containerRef.current?.offsetWidth);
-
-    // 由于自定义字体的缘故，innerRef 的初始宽度可能发生二次改变，使用 observer 监听捕获
-    innerObserver = new ResizeObserver(() => {
-      if (!isCompact.current && innerRef.current?.offsetWidth !== innerWidth) {
-        setAddressFullWidth(innerRef.current?.offsetWidth);
-        delaySetLoadingFalse();
+  }), o = b(null), n = b(null);
+  return j(
+    t,
+    () => new Proxy(
+      {},
+      {
+        get(c, s) {
+          var e;
+          return (e = n.current) == null ? void 0 : e[s];
+        }
       }
-    });
-    containerObserver = new ResizeObserver(() => {
-      setContainerWidth(containerRef.current?.offsetWidth);
-    });
-    innerObserver.observe(innerRef.current.getEl());
-    containerObserver.observe(containerRef.current);
-    delaySetLoadingFalse();
-    return () => {
-      innerObserver?.disconnect();
-      containerObserver?.disconnect();
+    )
+  ), R(() => {
+    var W, g;
+    const c = ((W = n.current) == null ? void 0 : W.offsetWidth) || 0;
+    let s = null, e = null;
+    return m(c), w((g = o.current) == null ? void 0 : g.offsetWidth), s = new ResizeObserver(() => {
+      var i, v;
+      !z.current && ((i = n.current) == null ? void 0 : i.offsetWidth) !== c && (m((v = n.current) == null ? void 0 : v.offsetWidth), x());
+    }), e = new ResizeObserver(() => {
+      var i;
+      w((i = o.current) == null ? void 0 : i.offsetWidth);
+    }), s.observe(n.current.getEl()), e.observe(o.current), x(), () => {
+      s == null || s.disconnect(), e == null || e.disconnect();
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-  useEffect(() => {
-    if (containerWidth && addressFullWidth) {
-      setCompact(containerWidth < addressFullWidth);
-    }
-  }, [containerWidth, addressFullWidth]);
-  return /*#__PURE__*/_jsxs(Root, {
-    as: component,
-    ref: containerRef,
-    style: style,
-    className: className,
-    size: size,
-    ...(component === 'span' ? {} : {
-      inline: rest.inline
-    }),
-    children: [/*#__PURE__*/_jsx(StyledDidAddress, {
-      style: {
-        position: loading ? 'absolute' : 'static',
-        left: loading ? '-99999px' : 'auto'
+  }, []), R(() => {
+    u && f && S(u < f);
+  }, [u, f]), /* @__PURE__ */ E(
+    H,
+    {
+      as: l,
+      ref: o,
+      style: A,
+      className: D,
+      size: d,
+      ...l === "span" ? {} : {
+        inline: p.inline
       },
-      ...rest,
-      size: size,
-      component: component,
-      inline: true,
-      compact: compact,
-      ref: innerRef
-    }), loading && /*#__PURE__*/_jsx("div", {
-      style: {
-        width: '100%',
-        height: `${(size || 16) * 1.5}px`
-      }
-    })]
-  });
-});
-export default ResponsiveDidAddress;
-const Root = styled(Box, {
-  shouldForwardProp: prop => prop !== 'size'
-})`
+      children: [
+        /* @__PURE__ */ y(
+          I,
+          {
+            style: {
+              position: a ? "absolute" : "static",
+              left: a ? "-99999px" : "auto"
+            },
+            ...p,
+            size: d,
+            component: l,
+            inline: !0,
+            compact: h,
+            ref: n
+          }
+        ),
+        a && /* @__PURE__ */ y("div", { style: { width: "100%", height: `${(d || 16) * 1.5}px` } })
+      ]
+    }
+  );
+}
+const H = F(k, { shouldForwardProp: (t) => t !== "size" })`
   display: block;
   width: 100%; /* flex & column & align-items: flex-start 时, 块级元素不会自动铺满容器 */
-  font-size: ${({
-  size
-}) => getFontSize(size)};
+  font-size: ${({ size: t }) => B(t)};
   overflow: hidden;
-  ${({
-  inline
-}) => inline && `
+  ${({ inline: t }) => t && `
     display: inline-block;
     width: 100%;
   `}
-`;
-const StyledDidAddress = styled(DidAddress)`
+`, I = F(P)`
   && {
     max-width: none;
   }
@@ -130,4 +93,7 @@ const StyledDidAddress = styled(DidAddress)`
     overflow: visible;
     text-overflow: unset;
   }
-`;
+`;
+export {
+  Q as default
+};

package/lib/Alert/Alert.stories.d.ts

@@ -0,0 +1,28 @@
+export function WithDifferentType(): import("react/jsx-runtime").JSX.Element;
+export namespace WithDifferentType {
+    let storyName: string;
+}
+export function WithDifferentVariant(): import("react/jsx-runtime").JSX.Element;
+export namespace WithDifferentVariant {
+    let storyName_1: string;
+    export { storyName_1 as storyName };
+}
+export function WithIcon(): import("react/jsx-runtime").JSX.Element;
+export namespace WithIcon {
+    let storyName_2: string;
+    export { storyName_2 as storyName };
+}
+export function WithDifferentMessage(): import("react/jsx-runtime").JSX.Element;
+export namespace WithDifferentMessage {
+    let storyName_3: string;
+    export { storyName_3 as storyName };
+}
+declare namespace _default {
+    let title: string;
+    namespace parameters {
+        namespace readme {
+            let sidebar: string;
+        }
+    }
+}
+export default _default;

package/lib/Alert/index.d.ts

@@ -1,4 +1,4 @@
-declare const _default: (props: AlertProps) => import("react/jsx-runtime").JSX.Element;
+declare const _default: (props: any) => import("react/jsx-runtime").JSX.Element;
 export default _default;
 /**
  * Alert notification component
@@ -9,4 +9,4 @@ export type AlertProps = {
     className?: string;
     style?: object | string;
     variant?: "border" | "icon";
-} & import("react").ComponentPropsWithoutRef<"div">;
+} & import('react').ComponentPropsWithoutRef<"div">;