@arcblock/ux 2.13.70 → 3.0.0

package/lib/SplitButton/index.js

@@ -1,93 +1,46 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import React, { useState, useRef, isValidElement, createElement as _createElement } from 'react';
-import ExpandMore from '@mui/icons-material/ExpandMore';
-import Popper from '@mui/material/Popper';
-import Paper from '@mui/material/Paper';
-import ClickAwayListener from '@mui/material/ClickAwayListener';
-import MenuList from '@mui/material/MenuList';
-import MenuItem from '@mui/material/MenuItem';
-import ButtonGroup from '@mui/material/ButtonGroup';
-import Button from '@mui/material/Button';
-import noop from 'lodash/noop';
-import { styled } from '../Theme';
-export default function SplitButton(props) {
+import { jsxs as s, Fragment as I, jsx as e } from "react/jsx-runtime";
+import { useState as P, useRef as b, createElement as A, isValidElement as E } from "react";
+import { ExpandMore as L } from "@mui/icons-material";
+import { ButtonGroup as S, Popper as w, MenuItem as p, Button as c, Paper as z, ClickAwayListener as j, MenuList as G } from "@mui/material";
+import R from "lodash/noop";
+import { styled as d } from "../Theme/index.js";
+function v(o) {
   const {
-    size = 'medium',
-    color = 'primary',
-    menu = [],
-    children = null,
-    variant = 'contained',
-    onClick = noop,
-    menuButtonProps = {},
-    ...rest
-  } = props;
-  const [open, setOpen] = useState(false);
-  const anchorRef = useRef(null);
-  const menuItems = Array.isArray(menu) ? menu.map((item, index) => /*#__PURE__*/isValidElement(item) ? item : /*#__PURE__*/_createElement(MenuItem, {
-    ...item,
-    key: index
-  })) : menu;
-  const onToggle = () => {
-    setOpen(prevOpen => !prevOpen);
+    size: m = "medium",
+    color: r = "primary",
+    menu: i = [],
+    children: l = null,
+    variant: u = "contained",
+    onClick: f = R,
+    menuButtonProps: h = {},
+    ...g
+  } = o, [y, a] = P(!1), n = b(null), x = Array.isArray(i) ? (
+    // eslint-disable-next-line react/no-array-index-key
+    i.map((t, C) => E(t) ? t : /* @__PURE__ */ A(p, { ...t, key: C }))
+  ) : i, M = () => {
+    a((t) => !t);
+  }, k = (t) => {
+    n.current && n.current.contains(t.target) || a(!1);
+  }, B = (t) => {
+    t.target.closest(".MuiMenuItem-root") && a(!1);
   };
-  const handleClose = e => {
-    if (anchorRef.current && anchorRef.current.contains(e.target)) {
-      return;
-    }
-    setOpen(false);
-  };
-
-  // 点击 item 后收起下拉菜单, 如果想要点击 action 后不收起下拉菜单, 可以在 item#onClick 时调用 e.stopPropagation()
-  const handleItemClick = e => {
-    if (e.target.closest('.MuiMenuItem-root')) {
-      setOpen(false);
-    }
-  };
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsxs(StyledButtonGroup, {
-      variant: variant,
-      size: size,
-      color: color,
-      ref: anchorRef,
-      ...rest,
-      children: [typeof children === 'function' ? children() : /*#__PURE__*/_jsx(Button, {
-        onClick: onClick,
-        color: color,
-        children: children
-      }), /*#__PURE__*/_jsx(Button, {
-        onClick: onToggle,
-        color: color,
-        ...menuButtonProps,
-        "aria-label": "more functions",
-        children: /*#__PURE__*/_jsx(ExpandMore, {})
-      })]
-    }), /*#__PURE__*/_jsx(StyledPopper, {
-      open: open,
-      anchorEl: anchorRef.current,
-      placement: "bottom-end",
-      disablePortal: false,
-      children: /*#__PURE__*/_jsx(Paper, {
-        children: /*#__PURE__*/_jsx(ClickAwayListener, {
-          onClickAway: handleClose,
-          children: /*#__PURE__*/_jsx(MenuList, {
-            onClick: handleItemClick,
-            children: menuItems
-          })
-        })
-      })
-    })]
-  });
+  return /* @__PURE__ */ s(I, { children: [
+    /* @__PURE__ */ s(F, { variant: u, size: m, color: r, ref: n, ...g, children: [
+      typeof l == "function" ? l() : /* @__PURE__ */ e(c, { onClick: f, color: r, children: l }),
+      /* @__PURE__ */ e(c, { onClick: M, color: r, ...h, "aria-label": "more functions", children: /* @__PURE__ */ e(L, {}) })
+    ] }),
+    /* @__PURE__ */ e(O, { open: y, anchorEl: n.current, placement: "bottom-end", disablePortal: !1, children: /* @__PURE__ */ e(z, { children: /* @__PURE__ */ e(j, { onClickAway: k, children: /* @__PURE__ */ e(G, { onClick: B, children: x }) }) }) })
+  ] });
 }
-SplitButton.Item = MenuItem;
-const StyledButtonGroup = styled(ButtonGroup)`
+v.Item = p;
+const F = d(S)`
   > .MuiButtonBase-root:last-of-type {
     min-width: 2em;
     padding-left: 0;
     padding-right: 0;
   }
-`;
-const StyledPopper = styled(Popper)`
-  z-index: ${props => props.theme.zIndex.tooltip};
+`, O = d(w)`
+  z-index: ${(o) => o.theme.zIndex.tooltip};
   .MuiList-root {
     padding: 4px 0;
   }
@@ -95,4 +48,7 @@ const StyledPopper = styled(Popper)`
     padding-top: 4px;
     padding-bottom: 4px;
   }
-`;
+`;
+export {
+  v as default
+};

package/lib/Success/index.js

@@ -1,169 +1,183 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, useTheme } from '@mui/material';
-// FIXME: @zhanghan 目前无法适配各种 size，后续优化
-export default function Success({
-  size = 64,
-  backgroundColor,
-  borderWidth = 4
-}) {
-  const {
-    palette
-  } = useTheme();
-  const contentSize = size - borderWidth * 2;
-  const _backgroundColor = backgroundColor || palette.background.default;
-  return /*#__PURE__*/_jsxs(Box, {
-    className: "check-icon",
-    sx: {
-      width: contentSize,
-      height: contentSize,
-      position: 'relative',
-      borderRadius: '100%',
-      '&, *, *::before, *::after': {
-        boxSizing: 'content-box !important'
-      },
-      // 转圈边框的颜色
-      border: theme => `${borderWidth}px solid ${theme.palette.success.light}`,
-      '&::before, &::after': {
-        content: '""',
-        height: '125%',
-        position: 'absolute',
-        background: _backgroundColor,
-        transform: 'rotate(-45deg)'
-      },
-      '&::before': {
-        top: `${borderWidth / 2 + 1}px`,
-        left: `-${borderWidth / 2}px`,
-        width: `calc(32.5% + ${borderWidth}px)`,
-        transformOrigin: '100% 50%',
-        borderRadius: '100% 0 0 100%'
-      },
-      '&::after': {
-        top: 0,
-        left: '37.5%',
-        width: `calc(70% + ${borderWidth}px)`,
-        transformOrigin: '0 50%',
-        borderRadius: '0 100% 100% 0',
-        animation: 'rotate-circle 4.25s ease-in'
-      },
-      '.icon-line': {
-        height: `${borderWidth + 1}px`,
-        // 对勾的颜色
-        backgroundColor: theme => theme.palette.success.light,
-        display: 'block',
-        borderRadius: '100vw',
-        position: 'absolute',
-        zIndex: 10
-      },
-      '@keyframes rotate-circle': {
-        '0%': {
-          transform: 'rotate(-45deg)'
+import { jsxs as l, jsx as i } from "react/jsx-runtime";
+import { useTheme as p, Box as e } from "@mui/material";
+function x({ size: s = 64, backgroundColor: r, borderWidth: t = 4 }) {
+  const { palette: c } = p(), o = s - t * 2, a = r || c.background.default;
+  return /* @__PURE__ */ l(
+    e,
+    {
+      className: "check-icon",
+      sx: {
+        width: o,
+        height: o,
+        position: "relative",
+        borderRadius: "100%",
+        "&, *, *::before, *::after": {
+          boxSizing: "content-box !important"
         },
-        '5%': {
-          transform: 'rotate(-45deg)'
+        // 转圈边框的颜色
+        border: (n) => `${t}px solid ${n.palette.success.light}`,
+        "&::before, &::after": {
+          content: '""',
+          height: "125%",
+          position: "absolute",
+          background: a,
+          transform: "rotate(-45deg)"
         },
-        '12%': {
-          transform: 'rotate(-405deg)'
+        "&::before": {
+          top: `${t / 2 + 1}px`,
+          left: `-${t / 2}px`,
+          width: `calc(32.5% + ${t}px)`,
+          transformOrigin: "100% 50%",
+          borderRadius: "100% 0 0 100%"
         },
-        '100%': {
-          transform: 'rotate(-405deg)'
-        }
-      }
-    },
-    children: [/*#__PURE__*/_jsx(Box, {
-      component: "span",
-      className: "icon-line line-tip",
-      sx: {
-        top: '57.5%',
-        left: '17.5%',
-        width: '31.25%',
-        transform: 'rotate(45deg)',
-        animation: 'icon-line-tip 0.75s',
-        '@keyframes icon-line-tip': {
-          '0%': {
-            width: '0',
-            left: '1px',
-            top: '23.75%'
-          },
-          '54%': {
-            width: '0',
-            left: '1px',
-            top: '23.75%'
+        "&::after": {
+          top: 0,
+          left: "37.5%",
+          width: `calc(70% + ${t}px)`,
+          transformOrigin: "0 50%",
+          borderRadius: "0 100% 100% 0",
+          animation: "rotate-circle 4.25s ease-in"
+        },
+        ".icon-line": {
+          height: `${t + 1}px`,
+          // 对勾的颜色
+          backgroundColor: (n) => n.palette.success.light,
+          display: "block",
+          borderRadius: "100vw",
+          position: "absolute",
+          zIndex: 10
+        },
+        "@keyframes rotate-circle": {
+          "0%": {
+            transform: "rotate(-45deg)"
           },
-          '70%': {
-            width: '62.5%',
-            left: '-10%',
-            top: '46.25%'
+          "5%": {
+            transform: "rotate(-45deg)"
           },
-          '84%': {
-            width: '21.25%',
-            left: '26.25%',
-            top: '60%'
+          "12%": {
+            transform: "rotate(-405deg)"
           },
-          '100%': {
-            width: '31.25',
-            left: '17.5%',
-            top: '56.25%'
+          "100%": {
+            transform: "rotate(-405deg)"
           }
         }
-      }
-    }), /*#__PURE__*/_jsx(Box, {
-      component: "span",
-      className: "icon-line line-long",
-      sx: {
-        top: '47.5%',
-        right: '10%',
-        width: '58.75%',
-        transform: 'rotate(-45deg)',
-        animation: 'icon-line-long 0.75s',
-        '@keyframes icon-line-long': {
-          '0%': {
-            width: '0',
-            right: '57.5%',
-            top: '67.5%'
-          },
-          '65%': {
-            width: '0',
-            right: '57.5%',
-            top: '67.5%'
-          },
-          '84%': {
-            width: '68.75%',
-            right: '0px',
-            top: '43.75%'
-          },
-          '100%': {
-            width: '58.75%',
-            right: '10%',
-            top: '47.5%'
+      },
+      children: [
+        /* @__PURE__ */ i(
+          e,
+          {
+            component: "span",
+            className: "icon-line line-tip",
+            sx: {
+              top: "57.5%",
+              left: "17.5%",
+              width: "31.25%",
+              transform: "rotate(45deg)",
+              animation: "icon-line-tip 0.75s",
+              "@keyframes icon-line-tip": {
+                "0%": {
+                  width: "0",
+                  left: "1px",
+                  top: "23.75%"
+                },
+                "54%": {
+                  width: "0",
+                  left: "1px",
+                  top: "23.75%"
+                },
+                "70%": {
+                  width: "62.5%",
+                  left: "-10%",
+                  top: "46.25%"
+                },
+                "84%": {
+                  width: "21.25%",
+                  left: "26.25%",
+                  top: "60%"
+                },
+                "100%": {
+                  width: "31.25",
+                  left: "17.5%",
+                  top: "56.25%"
+                }
+              }
+            }
           }
-        }
-      }
-    }), /*#__PURE__*/_jsx(Box, {
-      className: "icon-circle",
-      sx: {
-        top: `-${borderWidth}px`,
-        left: `-${borderWidth}px`,
-        zIndex: 10,
-        width: contentSize,
-        height: contentSize,
-        borderRadius: '100%',
-        position: 'absolute',
-        boxSizing: 'contentBox',
-        // 圆环的颜色
-        border: `${borderWidth}px solid rgba(76, 175, 80, 0.63)`
-      }
-    }), /*#__PURE__*/_jsx(Box, {
-      className: "icon-fix",
-      sx: {
-        top: `calc(8% - ${Math.sqrt(borderWidth)}px)`,
-        width: borderWidth + 1,
-        left: `calc(32% - ${Math.sqrt(borderWidth)}px)`,
-        zIndex: 1,
-        height: contentSize + borderWidth * 2,
-        position: 'absolute',
-        transform: 'rotate(-45deg)',
-        backgroundColor: _backgroundColor
-      }
-    })]
-  });
-}
+        ),
+        /* @__PURE__ */ i(
+          e,
+          {
+            component: "span",
+            className: "icon-line line-long",
+            sx: {
+              top: "47.5%",
+              right: "10%",
+              width: "58.75%",
+              transform: "rotate(-45deg)",
+              animation: "icon-line-long 0.75s",
+              "@keyframes icon-line-long": {
+                "0%": {
+                  width: "0",
+                  right: "57.5%",
+                  top: "67.5%"
+                },
+                "65%": {
+                  width: "0",
+                  right: "57.5%",
+                  top: "67.5%"
+                },
+                "84%": {
+                  width: "68.75%",
+                  right: "0px",
+                  top: "43.75%"
+                },
+                "100%": {
+                  width: "58.75%",
+                  right: "10%",
+                  top: "47.5%"
+                }
+              }
+            }
+          }
+        ),
+        /* @__PURE__ */ i(
+          e,
+          {
+            className: "icon-circle",
+            sx: {
+              top: `-${t}px`,
+              left: `-${t}px`,
+              zIndex: 10,
+              width: o,
+              height: o,
+              borderRadius: "100%",
+              position: "absolute",
+              boxSizing: "contentBox",
+              // 圆环的颜色
+              border: `${t}px solid rgba(76, 175, 80, 0.63)`
+            }
+          }
+        ),
+        /* @__PURE__ */ i(
+          e,
+          {
+            className: "icon-fix",
+            sx: {
+              top: `calc(8% - ${Math.sqrt(t)}px)`,
+              width: t + 1,
+              left: `calc(32% - ${Math.sqrt(t)}px)`,
+              zIndex: 1,
+              height: o + t * 2,
+              position: "absolute",
+              transform: "rotate(-45deg)",
+              backgroundColor: a
+            }
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  x as default
+};

package/lib/Switch/Switch.stories.d.ts

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

package/lib/Switch/index.d.ts

@@ -1,10 +1,11 @@
+import { default as PropTypes } from 'prop-types';
 export default Switch;
 /**
  * Switch 组件 Props
  */
 export type SwitchProps = {
-    labelProps?: import("@mui/material").FormControlLabelProps;
-} & import("@mui/material").SwitchProps;
+    labelProps?: import('@mui/material').FormControlLabelProps;
+} & import('@mui/material').SwitchProps;
 /**
  * Switch 组件 Props
  * @typedef {{
@@ -23,9 +24,4 @@ declare namespace Switch {
     namespace propTypes {
         let labelProps: PropTypes.Requireable<object>;
     }
-    namespace defaultProps {
-        let labelProps_1: null;
-        export { labelProps_1 as labelProps };
-    }
 }
-import PropTypes from 'prop-types';

package/lib/Switch/index.js

@@ -1,96 +1,60 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import PropTypes from 'prop-types';
-import FormControlLabel from '@mui/material/FormControlLabel';
-import MuiSwitch from '@mui/material/Switch';
-import { styled } from '../Theme';
-
-// 参考: https://mui.com/material-ui/react-switch/#customization
-const IOSSwitch = styled(props => /*#__PURE__*/_jsx(MuiSwitch, {
-  focusVisibleClassName: ".Mui-focusVisible",
-  disableRipple: true,
-  ...props
-}))(({
-  theme
-}) => ({
-  width: 42,
-  height: 26,
-  padding: 0,
-  '& .MuiSwitch-switchBase': {
+import { jsx as t } from "react/jsx-runtime";
+import a from "prop-types";
+import { Switch as c, FormControlLabel as e } from "@mui/material";
+import { styled as l } from "../Theme/index.js";
+const r = l((i) => /* @__PURE__ */ t(c, { focusVisibleClassName: ".Mui-focusVisible", disableRipple: !0, ...i }))(
+  ({ theme: i }) => ({
+    width: 42,
+    height: 26,
     padding: 0,
-    margin: 2,
-    transitionDuration: '300ms',
-    '&.Mui-checked': {
-      transform: 'translateX(16px)',
-      color: '#fff',
-      '& + .MuiSwitch-track': {
-        backgroundColor: theme.palette.primary.main,
-        opacity: 1,
-        border: 0
+    "& .MuiSwitch-switchBase": {
+      padding: 0,
+      margin: 2,
+      transitionDuration: "300ms",
+      "&.Mui-checked": {
+        transform: "translateX(16px)",
+        color: "#fff",
+        "& + .MuiSwitch-track": {
+          backgroundColor: i.palette.primary.main,
+          opacity: 1,
+          border: 0
+        },
+        "&.Mui-disabled + .MuiSwitch-track": {
+          opacity: 0.5
+        }
       },
-      '&.Mui-disabled + .MuiSwitch-track': {
-        opacity: 0.5
+      "&.Mui-focusVisible .MuiSwitch-thumb": {
+        color: i.palette.primary.main,
+        border: "6px solid #fff"
+      },
+      "&.Mui-disabled .MuiSwitch-thumb": {
+        color: i.palette.mode === "light" ? i.palette.grey[100] : i.palette.grey[600]
+      },
+      "&.Mui-disabled + .MuiSwitch-track": {
+        opacity: i.palette.mode === "light" ? 0.7 : 0.3
       }
     },
-    '&.Mui-focusVisible .MuiSwitch-thumb': {
-      color: theme.palette.primary.main,
-      border: '6px solid #fff'
-    },
-    '&.Mui-disabled .MuiSwitch-thumb': {
-      color: theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[600]
+    "& .MuiSwitch-thumb": {
+      boxSizing: "border-box",
+      width: 22,
+      height: 22
     },
-    '&.Mui-disabled + .MuiSwitch-track': {
-      opacity: theme.palette.mode === 'light' ? 0.7 : 0.3
+    "& .MuiSwitch-track": {
+      borderRadius: 26 / 2,
+      backgroundColor: i.palette.grey[200],
+      opacity: 1,
+      transition: i.transitions.create(["background-color"], {
+        duration: 500
+      })
     }
-  },
-  '& .MuiSwitch-thumb': {
-    boxSizing: 'border-box',
-    width: 22,
-    height: 22
-  },
-  '& .MuiSwitch-track': {
-    borderRadius: 26 / 2,
-    backgroundColor: theme.palette.grey[200],
-    opacity: 1,
-    transition: theme.transitions.create(['background-color'], {
-      duration: 500
-    })
-  }
-}));
-
-/**
- * Switch 组件 Props
- * @typedef {{
- *  labelProps?: import('@mui/material').FormControlLabelProps;
- * } & import('@mui/material').SwitchProps } SwitchProps
- */
-
-/**
- * 抽取 blocklet server 中使用的 iOS 风格的 Switch,
- * 该组件把 FormControlLabel 和 MuiSwitch 组合在一起,
- * 兼容 mui Switch props, 使用 labelProps 控制 FormControlLabel
- * @param {SwitchProps} props
- * @returns {JSX.Element}
- */
-function Switch({
-  labelProps,
-  ...rest
-}) {
-  if (labelProps) {
-    return /*#__PURE__*/_jsx(FormControlLabel, {
-      control: /*#__PURE__*/_jsx(IOSSwitch, {
-        ...rest
-      }),
-      ...labelProps
-    });
-  }
-  return /*#__PURE__*/_jsx(IOSSwitch, {
-    ...rest
-  });
+  })
+);
+function u({ labelProps: i = null, ...o }) {
+  return i ? /* @__PURE__ */ t(e, { control: /* @__PURE__ */ t(r, { ...o }), ...i }) : /* @__PURE__ */ t(r, { ...o });
 }
-Switch.propTypes = {
-  labelProps: PropTypes.object
+u.propTypes = {
+  labelProps: a.object
 };
-Switch.defaultProps = {
-  labelProps: null
+export {
+  u as default
 };
-export default Switch;