@arcblock/ux 2.13.70 → 3.0.0

package/lib/BlockletV2/utils.js

@@ -1,5 +1,5 @@
-import { styled } from '../Theme';
-const ActionButton = styled('div')`
+import { styled as r } from "../Theme/index.js";
+const i = r("div")`
   background-color: transparent !important;
   & > :not(.Mui-disabled) {
     position: relative;
@@ -24,7 +24,7 @@ const ActionButton = styled('div')`
       top: 0;
       left: 0;
       border-radius: 2px;
-      background-color: ${props => props.theme.palette.primary.main};
+      background-color: ${(t) => t.theme.palette.primary.main};
       transform: scale(0.1);
       opacity: 0;
       z-index: -1;
@@ -41,31 +41,19 @@ const ActionButton = styled('div')`
   }
   & > :not(.Mui-disabled) {
     background-color: transparent !important;
-    color: ${props => props.theme.palette.primary.main}!important;
+    color: ${(t) => t.theme.palette.primary.main}!important;
   }
   & > :not(.Mui-disabled) {
     &:hover {
-      color: ${props => props.theme.palette.common.white}!important;
+      color: ${(t) => t.theme.palette.common.white}!important;
     }
   }
-`;
-export default ActionButton;
-export const strippedString = (originalString = '') => {
-  return originalString.replace(/(<([^>]+)>)/gi, '').trim();
+`, n = (t = "") => t.replace(/(<([^>]+)>)/gi, "").trim(), a = (t = "") => {
+  const o = parseInt(t, 10);
+  return Number.isNaN(o) ? t : o < 1e3 ? o : o < 1e6 ? `${(o / 1e3).toFixed(1)}k` : o < 1e9 ? `${(o / 1e6).toFixed(1)}m` : `${(o / 1e9).toFixed(1)}b`;
+};
+export {
+  i as default,
+  a as formatDownloadCount,
+  n as strippedString
 };
-export const formatDownloadCount = (num = '') => {
-  const n = parseInt(num, 10);
-  if (Number.isNaN(n)) {
-    return num;
-  }
-  if (n < 1000) {
-    return n;
-  }
-  if (n < 1000000) {
-    return `${(n / 1000).toFixed(1)}k`;
-  }
-  if (n < 1000000000) {
-    return `${(n / 1000000).toFixed(1)}m`;
-  }
-  return `${(n / 1000000000).toFixed(1)}b`;
-};

package/lib/Button/Button.stories.d.ts

@@ -0,0 +1,19 @@
+import { default as Button } from '.';
+import { default as Basic } from './demo/basic';
+declare namespace _default {
+    export let title: string;
+    export { Button as component };
+    export namespace parameters {
+        namespace docs {
+            namespace description {
+                let component: string;
+            }
+        }
+        namespace design {
+            let type: string;
+            let url: string;
+        }
+    }
+}
+export default _default;
+export { Basic };

package/lib/Button/index.d.ts

@@ -1,3 +1,3 @@
 export default ButtonComponent;
 /** @type {import('./wrap').ButtonComponent} */
-declare const ButtonComponent: import("./wrap").ButtonComponent;
+declare const ButtonComponent: import('./wrap').ButtonComponent;

package/lib/Button/index.js

@@ -1,8 +1,6 @@
-// @ts-check
-
-import Button from '@mui/material/Button';
-import wrap from './wrap';
-
-/** @type {import('./wrap').ButtonComponent} */
-const ButtonComponent = wrap(Button);
-export default ButtonComponent;
+import { Button as o } from "@mui/material";
+import t from "./wrap.js";
+const n = t(o);
+export {
+  n as default
+};

package/lib/Button/wrap.d.ts

@@ -17,12 +17,12 @@
  * @param {import('@mui/material').ExtendButtonBase<import('@mui/material').ButtonTypeMap<{}, "button">>} BaseComponent
  * @return {ButtonComponent}
  */
-export default function _default(BaseComponent: import("@mui/material").ExtendButtonBase<import("@mui/material").ButtonTypeMap<{}, "button">>): ButtonComponent;
-export type MuiButtonProps = import("@mui/material").ButtonProps;
+export default function wrap(BaseComponent: import('@mui/material').ExtendButtonBase<import('@mui/material').ButtonTypeMap<{}, "button">>): ButtonComponent;
+export type MuiButtonProps = import('@mui/material').ButtonProps;
 export type CustomButtonProps = {
     rounded?: false | true;
     loading?: false | true;
-    forwardedRef?: import("react").ForwardedRef<any>;
+    forwardedRef?: import('react').ForwardedRef<any>;
     color?: MuiButtonProps["color"] | "reverse" | "did";
 };
 export type ButtonProps = CustomButtonProps & Omit<MuiButtonProps, "color">;

package/lib/Button/wrap.js

@@ -1,141 +1,58 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/* eslint-disable prefer-destructuring */
-/* eslint-disable func-names */
-import { forwardRef } from 'react';
-import PropTypes from 'prop-types';
-import CircularProgress from '@mui/material/CircularProgress';
-import colors from '../Colors';
-import { mergeProps } from '../Util';
-const extendedColors = {
+import { jsx as u, jsxs as x } from "react/jsx-runtime";
+import r from "prop-types";
+import i from "lodash/isUndefined";
+import { CircularProgress as j } from "@mui/material";
+import o from "../Colors/themes/default.js";
+import { mergeProps as k } from "../Util/index.js";
+const y = {
   did: {
-    contained: {
-      backgroundColor: colors.did.primary,
-      color: colors.common.white
-    },
-    outlined: {
-      borderColor: colors.did.primary,
-      color: colors.did.primary
-    }
+    contained: { backgroundColor: o.did.primary, color: o.common.white },
+    outlined: { borderColor: o.did.primary, color: o.did.primary }
   },
   reverse: {
-    contained: {
-      backgroundColor: 'rgba(255, 255, 255, 0.9)',
-      color: colors.grey[900]
-    },
-    outlined: {
-      borderColor: colors.grey[900],
-      color: colors.grey[900]
-    }
+    contained: { backgroundColor: "rgba(255, 255, 255, 0.9)", color: o.grey[900] },
+    outlined: { borderColor: o.grey[900], color: o.grey[900] }
   }
 };
-
-/**
- * @typedef {import('@mui/material').ButtonProps} MuiButtonProps
- * @typedef {{
- *  rounded?: false | true,
- *  loading?: false | true,
- *  forwardedRef?: import('react').ForwardedRef<any>,
- *  color?: MuiButtonProps['color'] | 'reverse' | 'did'
- * }} CustomButtonProps
- * @typedef { CustomButtonProps & Omit<MuiButtonProps, 'color'> } ButtonProps
- */
-
-/**
- * @typedef {React.ForwardRefExoticComponent<React.PropsWithoutRef<ButtonProps> & React.RefAttributes<HTMLButtonElement>>} ButtonComponent
- */
-
-/**
- * @description
- * @export
- * @param {import('@mui/material').ExtendButtonBase<import('@mui/material').ButtonTypeMap<{}, "button">>} BaseComponent
- * @return {ButtonComponent}
- */
-export default function (BaseComponent) {
-  /**
-   *
-   * @param {ButtonProps} props
-   * @returns
-   */
-  function WrappedComponent(props) {
-    /**
-     * @type {ButtonProps}
-     */
-    const newProps = mergeProps(props, WrappedComponent, ['style']);
-    const {
-      children,
-      rounded,
-      loading,
-      disabled,
-      style,
-      forwardedRef,
-      color,
-      ...rest
-    } = newProps;
-    const isDisabled = disabled || loading;
-    let loadingSize = 16;
-    switch (rest.size) {
-      case 'small':
-        loadingSize = 14;
+function q(g) {
+  function d(c) {
+    const e = Object.assign({}, c);
+    i(e.rounded) && (e.rounded = !1), i(e.size) && (e.size = "medium"), i(e.forwardedRef) && (e.forwardedRef = null), i(e.style) && (e.style = {});
+    const s = k(e, d, ["style"]), { children: b, rounded: w, loading: f, disabled: h, style: R, forwardedRef: C, color: n, ...t } = s, z = h || f;
+    let a = 16;
+    switch (t.size) {
+      case "small":
+        a = 14;
         break;
-      case 'large':
-        loadingSize = 18;
+      case "large":
+        a = 18;
         break;
-      default:
-    }
-
-    // mui v4 只支持 4 种 color 值: default/inherit/primary/secondary (传入这 4 种之外的值会报 warning),
-    // 这里扩展 danger/warning/reverse/did 四种 color
-    // !! 已升级到 mui v5, error/warning 等 color 已经默认支持, extendedColors 只扩展了 did/reverse
-    const matched = extendedColors[color] && extendedColors[color][rest.variant];
-
-    /**
-     * @type {import('react').CSSProperties}
-     */
-    const styles = Object.assign({}, {
-      boxShadow: 'none',
-      textTransform: 'capitalize',
-      ...matched
-    }, style);
-    let _rest = rest;
-    if (!matched) {
-      // mui button 本身支持的 color 交由 mui 处理
-      _rest = {
-        ..._rest,
-        color
-      };
     }
-    if (rounded) {
-      // styles.borderRadius = { small: 16, medium: 18, large: 20 }[rest.size];
-      styles.borderRadius = '100vw';
-    }
-    return /*#__PURE__*/_jsxs(BaseComponent, {
-      style: styles,
-      ref: forwardedRef,
-      disabled: isDisabled,
-      ..._rest,
-      children: [loading && /*#__PURE__*/_jsx(CircularProgress, {
-        size: loadingSize,
-        style: {
-          marginRight: 5
-        }
-      }), children]
-    });
+    const m = y[n] && y[n][t.variant], p = Object.assign(
+      {},
+      {
+        boxShadow: "none",
+        textTransform: "capitalize",
+        ...m
+      },
+      R
+    );
+    let l = t;
+    return m || (l = { ...l, color: n }), w && (p.borderRadius = "100vw"), /* @__PURE__ */ x(g, { style: p, ref: C, disabled: z, ...l, children: [
+      f && /* @__PURE__ */ u(j, { size: a, style: { marginRight: 5 } }),
+      b
+    ] });
   }
-  WrappedComponent.propTypes = {
-    children: PropTypes.any.isRequired,
-    style: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
-    size: PropTypes.oneOf(['large', 'medium', 'small']),
-    forwardedRef: PropTypes.any,
-    rounded: PropTypes.bool
-  };
-  WrappedComponent.defaultProps = {
-    rounded: false,
-    size: 'medium',
-    forwardedRef: null,
-    style: {}
+  return d.propTypes = {
+    children: r.any.isRequired,
+    style: r.oneOfType([r.object, r.string]),
+    size: r.oneOf(["large", "medium", "small"]),
+    forwardedRef: r.any,
+    rounded: r.bool
+  }, function({ ref: e, ...s }) {
+    return /* @__PURE__ */ u(d, { ...s, forwardedRef: e });
   };
-  return /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/_jsx(WrappedComponent, {
-    ...props,
-    forwardedRef: ref
-  }));
-}
+}
+export {
+  q as default
+};

package/lib/ButtonGroup/index.d.ts

@@ -1,6 +1,6 @@
 export default ButtonGroupComponent;
-export type MuiButtonGroupProps = import("@mui/material").ButtonGroupProps;
-export type ButtonGroupProps = import("../Button/wrap").CustomButtonProps & Omit<MuiButtonGroupProps, "color">;
+export type MuiButtonGroupProps = import('@mui/material').ButtonGroupProps;
+export type ButtonGroupProps = import('../Button/wrap').CustomButtonProps & Omit<MuiButtonGroupProps, "color">;
 /**
  * @typedef {import('@mui/material').ButtonGroupProps} MuiButtonGroupProps
  * @typedef {import('../Button/wrap').CustomButtonProps & Omit<MuiButtonGroupProps, 'color'>} ButtonGroupProps

package/lib/ButtonGroup/index.js

@@ -1,16 +1,6 @@
-import ButtonGroup from '@mui/material/ButtonGroup';
-import wrap from '../Button/wrap';
-
-/**
- * @typedef {import('@mui/material').ButtonGroupProps} MuiButtonGroupProps
- * @typedef {import('../Button/wrap').CustomButtonProps & Omit<MuiButtonGroupProps, 'color'>} ButtonGroupProps
- */
-
-/**
- * @deprecated 建议直接使用 @mui/material/ButtonGroup
- * @type {React.ForwardRefExoticComponent<React.PropsWithoutRef<ButtonGroupProps> & React.RefAttributes<HTMLButtonElement>>}
- */
-const ButtonGroupComponent = wrap(ButtonGroup);
-
-// 该定制组件原本目的是调整 ButtonGroup 的圆角, 但最新设计规范已经不再使用较大的圆角, 改为使用 mui button 默认的圆角
-export default ButtonGroupComponent;
+import { ButtonGroup as o } from "@mui/material";
+import t from "../Button/wrap.js";
+const m = t(o);
+export {
+  m as default
+};

package/lib/CardSelector/index.js

@@ -1,101 +1,55 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useState, useEffect, useRef } from 'react';
-import styled from '@emotion/styled';
-import noop from 'lodash/noop';
-export default function CardSelector({
-  list = [],
-  width = 300,
-  height = 400,
-  cardSpace = 40,
-  onSelect = noop,
-  defaultIndex = 0
+import { jsx as r } from "react/jsx-runtime";
+import { useState as m, useRef as x, useEffect as y } from "react";
+import k from "@emotion/styled";
+import X from "lodash/noop";
+function $({
+  list: i = [],
+  width: s = 300,
+  height: l = 400,
+  cardSpace: o = 40,
+  onSelect: f = X,
+  defaultIndex: h = 0
 }) {
-  const [selectedId, setSelectedId] = useState(0);
-  const [translateX, setTranslateX] = useState(0);
-  const outterCon = useRef(null);
-
-  // 选择卡片
-  const selectedItem = i => {
-    if (i < 0 || i > list.length - 1) {
-      return;
-    }
-    setSelectedId(i);
-    if (outterCon.current) {
-      // 外部容器大小
-      const outerWidth = outterCon.current.clientWidth;
-      setTranslateX(i * (width + cardSpace) - (outerWidth - width) / 2 + cardSpace * 0.5);
-    }
-    onSelect(i);
-  };
-  useEffect(() => {
-    selectedItem(defaultIndex);
-    outterCon.current?.addEventListener('touchmove', e => e.preventDefault(), {
-      passive: false
-    });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-  let startX;
-  const touchstart = e => {
-    const point = e.touches[0];
-    startX = point.clientX;
-  };
-  const touchend = e => {
-    const point = e.changedTouches[0];
-    const diffX = startX - point.clientX;
-    if (Math.abs(diffX) > 60) {
-      if (diffX > 0) {
-        selectedItem(selectedId + 1);
-      } else {
-        selectedItem(selectedId - 1);
+  const [a, p] = m(0), [g, v] = m(0), c = x(null), n = (t) => {
+    if (!(t < 0 || t > i.length - 1)) {
+      if (p(t), c.current) {
+        const e = c.current.clientWidth;
+        v(t * (s + o) - (e - s) / 2 + o * 0.5);
       }
+      f(t);
     }
   };
-  return /*#__PURE__*/_jsx(Container, {
-    ref: outterCon,
-    onTouchStart: touchstart,
-    onTouchEnd: touchend,
-    children: /*#__PURE__*/_jsx("div", {
-      className: "card-container",
-      style: {
-        transform: `translate(${-translateX}px, 0)`
-      },
-      children: list.map((e, i) => {
-        if (e instanceof Function) {
-          return /*#__PURE__*/_jsx("div", {
-            className: `card-item ${i === selectedId ? 'selected' : ''}`,
-            style: {
-              width,
-              height,
-              margin: cardSpace / 2
-            }
-            // eslint-disable-next-line react/no-array-index-key
-            ,
-
-            onClick: () => selectedItem(i),
-            children: e(i)
-          }, i);
-        }
-        return /*#__PURE__*/_jsx("div", {
-          className: `card-item ${i === selectedId ? 'selected' : ''}`,
-          style: {
-            width,
-            height,
-            margin: cardSpace / 2
-          }
-          // eslint-disable-next-line react/no-array-index-key
-          ,
-
-          onClick: () => selectedItem(i),
-          children: /*#__PURE__*/_jsx("img", {
-            src: e.src,
-            alt: e.name
-          })
-        }, i);
-      })
-    })
-  });
+  y(() => {
+    var t;
+    n(h), (t = c.current) == null || t.addEventListener("touchmove", (e) => e.preventDefault(), { passive: !1 });
+  }, []);
+  let d;
+  return /* @__PURE__ */ r(b, { ref: c, onTouchStart: (t) => {
+    d = t.touches[0].clientX;
+  }, onTouchEnd: (t) => {
+    const e = t.changedTouches[0], u = d - e.clientX;
+    Math.abs(u) > 60 && (u > 0 ? n(a + 1) : n(a - 1));
+  }, children: /* @__PURE__ */ r("div", { className: "card-container", style: { transform: `translate(${-g}px, 0)` }, children: i.map((t, e) => t instanceof Function ? /* @__PURE__ */ r(
+    "div",
+    {
+      className: `card-item ${e === a ? "selected" : ""}`,
+      style: { width: s, height: l, margin: o / 2 },
+      onClick: () => n(e),
+      children: t(e)
+    },
+    e
+  ) : /* @__PURE__ */ r(
+    "div",
+    {
+      className: `card-item ${e === a ? "selected" : ""}`,
+      style: { width: s, height: l, margin: o / 2 },
+      onClick: () => n(e),
+      children: /* @__PURE__ */ r("img", { src: t.src, alt: t.name })
+    },
+    e
+  )) }) });
 }
-const Container = styled.div`
+const b = k.div`
   overflow: hidden;
   mask-image: linear-gradient(to left, transparent, black 3%, black 97%, transparent);
   overflow: hidden;
@@ -129,4 +83,7 @@ const Container = styled.div`
       }
     }
   }
-`;
+`;
+export {
+  $ as default
+};

package/lib/Center/Center.stories.d.ts

@@ -0,0 +1,18 @@
+import { default as Center } from '.';
+export { default as Basic } from './demo/basic';
+export { default as RelativeParent } from './demo/relative-parent';
+declare namespace _default {
+    export let title: string;
+    export { Center as component };
+    export namespace parameters {
+        let layout: string;
+        namespace docs {
+            namespace description {
+                let component: string;
+            }
+            let inlineStories: boolean;
+            let iframeHeight: number;
+        }
+    }
+}
+export default _default;

package/lib/Center/index.js

@@ -1,22 +1,16 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { styled } from '../Theme';
-export default function Center({
-  children,
-  relative = 'screen'
+import { jsx as n } from "react/jsx-runtime";
+import { styled as r } from "../Theme/index.js";
+function o({
+  children: e,
+  relative: i = "screen"
 }) {
-  let style = {};
-  if (relative === 'parent') {
-    style = {
-      width: '100%',
-      height: '100%'
-    };
-  }
-  return /*#__PURE__*/_jsx(Div, {
-    style: style,
-    children: children
-  });
+  let t = {};
+  return i === "parent" && (t = {
+    width: "100%",
+    height: "100%"
+  }), /* @__PURE__ */ n(s, { style: t, children: e });
 }
-const Div = styled('div')`
+const s = r("div")`
   flex: 1;
   width: 100vw;
   height: 100vh;
@@ -24,4 +18,7 @@ const Div = styled('div')`
   display: flex;
   justify-content: center;
   align-items: center;
-`;
+`;
+export {
+  o as default
+};

package/lib/ClickToCopy/ClickToCopy.stories.d.ts

@@ -0,0 +1,16 @@
+import { default as Basic } from './demo/basic';
+import { default as WithComplexChild } from './demo/with-complex-child';
+import { default as WithCustomParentFontColor } from './demo/with-custom-parent-font-color';
+import { default as CopyButton } from './demo/copy-button';
+declare namespace _default {
+    let title: string;
+    namespace parameters {
+        namespace docs {
+            namespace description {
+                let component: string;
+            }
+        }
+    }
+}
+export default _default;
+export { Basic, WithComplexChild, WithCustomParentFontColor, CopyButton };

package/lib/ClickToCopy/copy-button.d.ts

@@ -1,10 +1,11 @@
-import type { Locale } from '../type';
+import { JSX } from 'react';
+import { Locale } from '../type';
 export interface CopyButtonProps extends React.HTMLAttributes<HTMLSpanElement> {
     content?: string;
     locale?: Locale;
     render?: (props: {
         copyButton: React.ReactNode;
-        containerRef: React.RefObject<HTMLElement>;
+        containerRef: React.Ref<unknown>;
     }) => JSX.Element | null;
     showTooltip?: true | false;
 }