@arcblock/ux 2.13.69 → 3.0.0

package/lib/Header/auto-hidden.d.ts

@@ -1,4 +1,4 @@
-import { type BoxProps } from '@mui/material/Box';
+import { BoxProps } from '@mui/material';
 export interface AutoHiddenProps extends BoxProps {
     height: number | string;
 }

package/lib/Header/auto-hidden.js

@@ -1,19 +1,10 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import Box from '@mui/material/Box';
-import { styled } from '../Theme';
-/**
- * 一个容器组件, 当子元素 width 超出该容器时自动隐藏子元素, 必须设置明确的 height 值
- */
-function AutoHidden({
-  height,
-  ...rest
-}) {
-  return /*#__PURE__*/_jsx(Root, {
-    height: height,
-    ...rest
-  });
+import { jsx as e } from "react/jsx-runtime";
+import { Box as i } from "@mui/material";
+import { styled as r } from "../Theme/index.js";
+function p({ height: o, ...t }) {
+  return /* @__PURE__ */ e(f, { height: o, ...t });
 }
-const Root = styled(Box)`
+const f = r(i)`
   overflow: hidden;
   &:before {
     content: '';
@@ -27,4 +18,6 @@ const Root = styled(Box)`
     white-space: nowrap;
   }
 `;
-export default AutoHidden;
+export {
+  p as default
+};

package/lib/Header/header-addons.d.ts

@@ -1,2 +1,2 @@
-import { type BoxProps } from '@mui/material';
+import { BoxProps } from '@mui/material';
 export default function HeaderAddons({ children, ...rest }: BoxProps): import("react/jsx-runtime").JSX.Element;

package/lib/Header/header-addons.js

@@ -1,38 +1,41 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Box } from '@mui/material';
-export default function HeaderAddons({
-  children,
-  ...rest
-}) {
-  return /*#__PURE__*/_jsx(Box, {
-    sx: {
-      display: 'flex',
-      alignItems: 'center',
-      gap: 1.5,
-      '> *': {
-        m: '0px!important'
+import { jsx as r } from "react/jsx-runtime";
+import { Box as i } from "@mui/material";
+function s({ children: o, ...t }) {
+  return /* @__PURE__ */ r(
+    i,
+    {
+      sx: {
+        display: "flex",
+        alignItems: "center",
+        gap: 1.5,
+        "> *": {
+          m: "0px!important"
+        },
+        ".MuiIconButton-root": {
+          width: 32,
+          height: 32,
+          p: 0,
+          border: 1,
+          borderColor: "divider"
+        },
+        ".MuiIconButton-root svg, .MuiButton-root svg": {
+          fontSize: 18,
+          width: "1em!important",
+          height: "1em!important"
+        },
+        ".arc-session-user-logged-in > *, .arc-session-user-logged-in svg": {
+          width: "100%!important",
+          height: "100%!important"
+        },
+        ".arc-session-user-unlogin svg": {
+          transform: "scale(1)!important"
+        }
       },
-      '.MuiIconButton-root': {
-        width: 32,
-        height: 32,
-        p: 0,
-        border: 1,
-        borderColor: 'divider'
-      },
-      '.MuiIconButton-root svg, .MuiButton-root svg': {
-        fontSize: 18,
-        width: '1em!important',
-        height: '1em!important'
-      },
-      '.arc-session-user-logged-in > *, .arc-session-user-logged-in svg': {
-        width: '100%!important',
-        height: '100%!important'
-      },
-      '.arc-session-user-unlogin svg': {
-        transform: 'scale(1)!important'
-      }
-    },
-    ...rest,
-    children: children
-  });
-}
+      ...t,
+      children: o
+    }
+  );
+}
+export {
+  s as default
+};

package/lib/Header/header.d.ts

@@ -1,4 +1,5 @@
-import { type BoxProps, type Breakpoint } from '@mui/material';
+import { BoxProps, Breakpoint } from '@mui/material';
+import { JSX } from 'react';
 export interface HeaderProps extends Omit<BoxProps, 'maxWidth'> {
     /** logo img/svg, 可以包裹一个 a 标签 */
     logo?: React.ReactNode;

package/lib/Header/header.js

@@ -1,111 +1,66 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Box, Container } from '@mui/material';
-import { useRef, useState, useEffect } from 'react';
-import AutoHidden from './auto-hidden';
-import { styled } from '../Theme';
-import HeaderAddons from './header-addons';
-/**
- * Header 组件
- * TODO: Layout/dashboard 可以复用此处的 header
- */
-function Header({
-  logo = null,
-  brand = null,
-  brandAddon = null,
-  description = null,
-  children = null,
-  addons = null,
-  prepend = null,
-  align = 'left',
-  maxWidth,
-  homeLink = '/',
-  ...rest
+import { jsx as r, jsxs as t, Fragment as y } from "react/jsx-runtime";
+import { Box as d, Container as w } from "@mui/material";
+import { useRef as v, useState as N, useEffect as k } from "react";
+import z from "./auto-hidden.js";
+import { styled as W } from "../Theme/index.js";
+import $ from "./header-addons.js";
+function I({
+  logo: e = null,
+  brand: l = null,
+  brandAddon: h = null,
+  description: s = null,
+  children: c = null,
+  addons: p = null,
+  prepend: f = null,
+  align: o = "left",
+  maxWidth: x,
+  homeLink: i = "/",
+  ...m
 }) {
-  const logoRef = useRef(null);
-  const [brandWrapperMinWidth, setBrandWrapperMinWidth] = useState('0px');
-  const style = {
-    minWidth: brandWrapperMinWidth
-  };
-  useEffect(() => {
-    const {
-      searchParams
-    } = new URL(window.location.href);
-    if (searchParams.get('inviter')) {
-      window.localStorage.setItem('inviter', searchParams.get('inviter'));
-    }
-    if (logoRef.current) {
-      setBrandWrapperMinWidth(`${logoRef.current.offsetWidth}px`);
-    }
-  }, []);
-  const renderBrand = () => {
-    const brandContent = /*#__PURE__*/_jsxs(_Fragment, {
-      children: [logo && /*#__PURE__*/_jsx("div", {
-        className: "header-logo",
-        ref: logoRef,
-        children: logo
-      }), brand && /*#__PURE__*/_jsx(AutoHidden, {
-        height: 44,
+  const a = v(null), [g, u] = N("0px"), b = { minWidth: g };
+  return k(() => {
+    const { searchParams: n } = new URL(window.location.href);
+    n.get("inviter") && window.localStorage.setItem("inviter", n.get("inviter")), a.current && u(`${a.current.offsetWidth}px`);
+  }, []), /* @__PURE__ */ r(B, { ...m, children: /* @__PURE__ */ t(w, { maxWidth: x, className: "header-container", children: [
+    f,
+    /* @__PURE__ */ r("div", { className: "header-brand-wrapper", style: b, children: (() => {
+      const n = /* @__PURE__ */ t(y, { children: [
+        e && /* @__PURE__ */ r("div", { className: "header-logo", ref: a, children: e }),
+        l && /* @__PURE__ */ r(z, { height: 44, sx: { flexShrink: { xs: 1 } }, children: /* @__PURE__ */ t("div", { className: "header-brand", children: [
+          /* @__PURE__ */ r("div", { className: "header-brand-title", children: /* @__PURE__ */ r("h2", { children: l }) }),
+          /* @__PURE__ */ r("div", { className: "header-brand-desc", children: s })
+        ] }) })
+      ] });
+      return typeof i == "function" ? i(n) : /* @__PURE__ */ r("a", { href: i, children: n });
+    })() }),
+    /* @__PURE__ */ r("div", { className: "header-brand-addon", children: h }),
+    o === "right" && /* @__PURE__ */ r(
+      d,
+      {
         sx: {
-          flexShrink: {
-            xs: 1
-          }
-        },
-        children: /*#__PURE__*/_jsxs("div", {
-          className: "header-brand",
-          children: [/*#__PURE__*/_jsx("div", {
-            className: "header-brand-title",
-            children: /*#__PURE__*/_jsx("h2", {
-              children: brand
-            })
-          }), /*#__PURE__*/_jsx("div", {
-            className: "header-brand-desc",
-            children: description
-          })]
-        })
-      })]
-    });
-    if (typeof homeLink === 'function') {
-      return homeLink(brandContent);
-    }
-    return /*#__PURE__*/_jsx("a", {
-      href: homeLink,
-      children: brandContent
-    });
-  };
-  return /*#__PURE__*/_jsx(Root, {
-    ...rest,
-    children: /*#__PURE__*/_jsxs(Container, {
-      maxWidth: maxWidth,
-      className: "header-container",
-      children: [prepend, /*#__PURE__*/_jsx("div", {
-        className: "header-brand-wrapper",
-        style: style,
-        children: renderBrand()
-      }), /*#__PURE__*/_jsx("div", {
-        className: "header-brand-addon",
-        children: brandAddon
-      }), align === 'right' && /*#__PURE__*/_jsx(Box, {
-        display: "inline-block",
-        flexGrow: 1
-      }), children, align === 'left' && /*#__PURE__*/_jsx(Box, {
-        display: "inline-block",
-        flexGrow: 1
-      }), /*#__PURE__*/_jsx(HeaderAddons, {
-        className: "header-addons",
-        children: addons
-      })]
-    })
-  });
+          display: "inline-block",
+          flexGrow: 1
+        }
+      }
+    ),
+    c,
+    o === "left" && /* @__PURE__ */ r(
+      d,
+      {
+        sx: {
+          display: "inline-block",
+          flexGrow: 1
+        }
+      }
+    ),
+    /* @__PURE__ */ r($, { className: "header-addons", children: p })
+  ] }) });
 }
-const Root = styled(Box)`
+const B = W(d)`
   position: relative;
   font-size: 14px;
-  z-index: ${({
-  theme
-}) => theme.zIndex.appBar};
-  background: ${({
-  theme
-}) => theme.palette.background.default};
+  z-index: ${({ theme: e }) => e.zIndex.appBar};
+  background: ${({ theme: e }) => e.palette.background.default};
   .header-container {
     display: flex;
     align-items: center;
@@ -156,9 +111,7 @@ const Root = styled(Box)`
     }
     .header-brand-desc {
       margin-top: 4px;
-      color: ${({
-  theme
-}) => theme.palette.text.hint};
+      color: ${({ theme: e }) => e.palette.text.hint};
     }
   }
   .header-brand-addon {
@@ -168,7 +121,7 @@ const Root = styled(Box)`
     display: flex;
     align-items: center;
   }
-  ${props => props.theme.breakpoints.down('lg')} {
+  ${(e) => e.theme.breakpoints.down("lg")} {
     .header-brand {
       margin-right: 12px;
       .header-brand-title {
@@ -181,7 +134,7 @@ const Root = styled(Box)`
       display: none;
     }
   }
-  ${props => props.theme.breakpoints.down('md')} {
+  ${(e) => e.theme.breakpoints.down("md")} {
     .header-menu {
       display: inline-block;
     }
@@ -200,4 +153,6 @@ const Root = styled(Box)`
     }
   }
 `;
-export default Header;
+export {
+  I as default
+};

package/lib/Header/index.js

@@ -1,3 +1,8 @@
-export { default as Header } from './header';
-export { default as ResponsiveHeader } from './responsive-header';
-export { default as HeaderAddons } from './header-addons';
+import { default as r } from "./header.js";
+import { default as o } from "./responsive-header.js";
+import { default as s } from "./header-addons.js";
+export {
+  r as Header,
+  s as HeaderAddons,
+  o as ResponsiveHeader
+};

package/lib/Header/responsive-header.d.ts

@@ -1,4 +1,4 @@
-import { type HeaderProps } from './header';
+import { HeaderProps } from './header';
 export interface ResponsiveHeaderProps extends Omit<HeaderProps, 'children'> {
     menu?: React.ReactNode;
     children?: React.ReactNode | ((props: {

package/lib/Header/responsive-header.js

@@ -1,127 +1,87 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
-import { useCreation, useReactive } from 'ahooks';
-import MenuIcon from '@mui/icons-material/Menu';
-import CloseIcon from '@mui/icons-material/Close';
-import Button from '@mui/material/IconButton';
-import Container from '@mui/material/Container';
-import useMediaQuery from '@mui/material/useMediaQuery';
-import Drawer from '@mui/material/Drawer';
-import Header from './header';
-import { styled, useTheme } from '../Theme';
-/**
- * ResponsiveHeader
- * - 窄屏下显示 burge menu
- * - 窄屏下将 children 区域显示到 menu 中
- *
- * 注意: 暂时不要通过 display: none 隐藏 logo, https://blog.patw.me/archives/1820/inline-svg-same-id-and-display-none-issue/
- */
-function ResponsiveHeader({
-  menu,
-  prepend,
-  children,
-  ...rest
-}) {
-  const theme = useTheme();
-  const isMobile = useMediaQuery(theme.breakpoints.down('md'));
-  const [drawerOpen, setDrawerOpen] = useState(false);
-  const _children = typeof children === 'function' ? children({
-    isMobile,
-    closeMenu: () => setDrawerOpen(false)
-  }) : children;
-
-  // HACK: MUI 的 modal 只会对 body 元素设置防滚动样式，还需要对 html 元素进行设置防滚动样式
-  const htmlOverflowState = useReactive({
-    changed: false,
-    value: '',
-    priority: ''
+import { jsx as o, jsxs as y } from "react/jsx-runtime";
+import { useState as v } from "react";
+import { useReactive as g, useCreation as h } from "ahooks";
+import { Close as b, Menu as x } from "@mui/icons-material";
+import { Container as w, useTheme as P, useMediaQuery as k, Drawer as C, Button as M } from "@mui/material";
+import c from "./header.js";
+import { styled as f } from "../Theme/index.js";
+function H({ menu: m, prepend: s, children: r, ...u }) {
+  const n = P(), a = k(n.breakpoints.down("md")), [t, l] = v(!1), d = typeof r == "function" ? r({ isMobile: a, closeMenu: () => l(!1) }) : r, e = g({
+    changed: !1,
+    value: "",
+    priority: ""
   });
-  useCreation(() => {
-    if (document.documentElement?.style) {
-      const clean = () => {
-        if (htmlOverflowState.changed) {
-          if (htmlOverflowState.value) {
-            document.documentElement.style.setProperty('overflow', htmlOverflowState.value, htmlOverflowState.priority);
-          } else {
-            document.documentElement.style.removeProperty('overflow');
-          }
-          htmlOverflowState.value = '';
-          htmlOverflowState.priority = '';
-          htmlOverflowState.changed = false;
-        }
+  return h(() => {
+    var p;
+    if ((p = document.documentElement) != null && p.style) {
+      const i = () => {
+        e.changed && (e.value ? document.documentElement.style.setProperty("overflow", e.value, e.priority) : document.documentElement.style.removeProperty("overflow"), e.value = "", e.priority = "", e.changed = !1);
       };
-      if (drawerOpen) {
-        htmlOverflowState.changed = true;
-        htmlOverflowState.value = document.documentElement.style.getPropertyValue('overflow');
-        htmlOverflowState.priority = document.documentElement.style.getPropertyPriority('overflow');
-        document.documentElement.style.setProperty('overflow', 'revert', 'important');
-      } else {
-        clean();
-      }
-      return clean;
+      return t ? (e.changed = !0, e.value = document.documentElement.style.getPropertyValue("overflow"), e.priority = document.documentElement.style.getPropertyPriority("overflow"), document.documentElement.style.setProperty("overflow", "revert", "important")) : i(), i;
     }
-    return () => {};
-  }, [drawerOpen]);
-
-  // 如果 children 没有值, 则使用普通的 Header 组件渲染 (此时并没有什么内容需要在 menu 中显示)
-  if (!children) {
-    return /*#__PURE__*/_jsx(Header, {
-      prepend: prepend,
-      ...rest
-    });
-  }
-  return /*#__PURE__*/_jsxs(Root, {
-    prepend: prepend || /*#__PURE__*/_jsx(Button, {
-      sx: {
-        color: theme.palette.grey[500]
-      },
-      edge: "start",
-      className: "header-menu",
-      "aria-label": "header menu button",
-      onClick: () => setDrawerOpen(!drawerOpen),
-      children: drawerOpen ? /*#__PURE__*/_jsx(CloseIcon, {}) : /*#__PURE__*/_jsx(MenuIcon, {})
-    }),
-    ...rest,
-    children: [!isMobile && _children, isMobile && /*#__PURE__*/_jsx(Drawer, {
-      open: drawerOpen,
-      onClose: () => setDrawerOpen(false),
-      ModalProps: {
-        disablePortal: false,
-        keepMounted: true,
-        BackdropComponent: undefined
-      },
-      anchor: "top",
-      sx: {
-        top: 64,
-        zIndex: theme.zIndex.appBar - 1
-      },
-      PaperProps: {
-        style: {
-          top: 64,
-          bottom: 0,
-          boxShadow: 'none',
-          backgroundImage: 'none',
-          backgroundColor: theme.palette.background.paper
+    return () => {
+    };
+  }, [t]), r ? /* @__PURE__ */ y(
+    E,
+    {
+      prepend: s || /* @__PURE__ */ o(
+        M,
+        {
+          sx: { color: n.palette.grey[500] },
+          edge: "start",
+          className: "header-menu",
+          "aria-label": "header menu button",
+          onClick: () => l(!t),
+          children: t ? /* @__PURE__ */ o(b, {}) : /* @__PURE__ */ o(x, {})
         }
-      },
-      children: /*#__PURE__*/_jsx(MenuPanel, {
-        children: _children
-      })
-    })]
-  });
+      ),
+      ...u,
+      children: [
+        !a && d,
+        a && /* @__PURE__ */ o(
+          C,
+          {
+            open: t,
+            onClose: () => l(!1),
+            ModalProps: {
+              disablePortal: !1,
+              keepMounted: !0,
+              BackdropComponent: void 0
+            },
+            anchor: "top",
+            sx: {
+              top: 64,
+              zIndex: n.zIndex.appBar - 1
+            },
+            slotProps: {
+              paper: {
+                style: {
+                  top: 64,
+                  bottom: 0,
+                  boxShadow: "none",
+                  backgroundImage: "none",
+                  backgroundColor: n.palette.background.paper
+                }
+              }
+            },
+            children: /* @__PURE__ */ o(B, { children: d })
+          }
+        )
+      ]
+    }
+  ) : /* @__PURE__ */ o(c, { prepend: s, ...u });
 }
-const Root = styled(Header)`
+const E = f(c)`
   .header-menu {
     display: none;
   }
-  ${props => props.theme.breakpoints.down('md')} {
+  ${(m) => m.theme.breakpoints.down("md")} {
     .header-menu {
       display: flex;
       margin-right: 12px;
     }
   }
-`;
-const MenuPanel = styled(Container)`
+`, B = f(w)`
   padding-top: 8px;
   padding-bottom: 16px;
   .navmenu {
@@ -132,4 +92,6 @@ const MenuPanel = styled(Container)`
     }
   }
 `;
-export default ResponsiveHeader;
+export {
+  H as default
+};

package/lib/Icon/Icon.stories.d.ts

@@ -0,0 +1,23 @@
+export function WithDifferentNames(): import("react/jsx-runtime").JSX.Element;
+export namespace WithDifferentNames {
+    let storyName: string;
+}
+export function WithDifferentSizes(): import("react/jsx-runtime").JSX.Element;
+export namespace WithDifferentSizes {
+    let storyName_1: string;
+    export { storyName_1 as storyName };
+}
+export function WithRounded(): import("react/jsx-runtime").JSX.Element;
+export namespace WithRounded {
+    let storyName_2: string;
+    export { storyName_2 as storyName };
+}
+declare namespace _default {
+    let title: string;
+    namespace parameters {
+        namespace readme {
+            let sidebar: string;
+        }
+    }
+}
+export default _default;

package/lib/Icon/image.d.ts

@@ -1,4 +1,4 @@
-import { type ImgProps } from '../Img';
+import { ImgProps } from '../Img';
 export interface ImageIconProps extends Omit<ImgProps, 'size' | 'src'> {
     name: string;
     size?: number;