@arcblock/ux 2.13.70 → 3.0.0

package/lib/NavMenu/style.d.ts

@@ -2,12 +2,12 @@ type NavMenuProps = {
     $bgColor: string;
     $textColor: string;
 };
-export declare const NavMenuStyled: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & NavMenuProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {}>;
-export declare const NavMenuRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, {}>;
+export declare const NavMenuStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & NavMenuProps, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLElement>, HTMLElement>, {}>;
+export declare const NavMenuRoot: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLUListElement>, HTMLUListElement>, {}>;
 type NavMenuItemProps = {
     $activeTextColor: string;
 };
-export declare const NavMenuItem: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & NavMenuItemProps, import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, {}>;
-export declare const NavMenuSub: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & NavMenuItemProps & import("react").ClassAttributes<HTMLLIElement> & import("react").LiHTMLAttributes<HTMLLIElement>, {}, {}>;
-export declare const NavMenuSubList: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, {}>;
+export declare const NavMenuItem: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & NavMenuItemProps, import('react').DetailedHTMLProps<import('react').LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, {}>;
+export declare const NavMenuSub: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & NavMenuItemProps & import('react').ClassAttributes<HTMLLIElement> & import('react').LiHTMLAttributes<HTMLLIElement>, {}, {}>;
+export declare const NavMenuSubList: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLUListElement>, HTMLUListElement>, {}>;
 export {};

package/lib/NavMenu/style.js

@@ -1,253 +1,237 @@
-import { styled } from '../Theme';
-// .navmenu
-export const NavMenuStyled = styled('nav', {
-  shouldForwardProp: prop => prop !== '$bgColor' && prop !== '$textColor'
-})(({
-  $bgColor,
-  $textColor,
-  theme
-}) => ({
-  position: 'relative',
-  padding: '0 16px',
-  minWidth: '50px',
+import { styled as i } from "../Theme/index.js";
+const o = i("nav", {
+  shouldForwardProp: (n) => n !== "$bgColor" && n !== "$textColor"
+})(({ $textColor: n, theme: t }) => ({
+  position: "relative",
+  padding: "0 16px",
+  minWidth: "50px",
   // FIXME: @zhanghan 这个只是临时的解决方案，会导致 header align right 不能真正的右对齐，需要修改 header 才能真正解决这个问题
   flexGrow: 100,
-  color: $textColor,
-  fontSize: '16px',
-  '&.navmenu--inline': {
-    backgroundColor: theme.palette.background.paper
+  color: n,
+  fontSize: "16px",
+  "&.navmenu--inline": {
+    backgroundColor: t.palette.background.paper
   }
-}));
-
-// .navmenu-root
-export const NavMenuRoot = styled('ul')(() => ({
-  listStyle: 'none',
+})), r = i("ul")(() => ({
+  listStyle: "none",
   margin: 0,
   padding: 0,
-  display: 'flex',
-  alignItems: 'center',
+  display: "flex",
+  alignItems: "center",
   // inline 布局
-  '&.navmenu-root--inline ': {
-    flexDirection: 'column',
-    alignItems: 'stretch'
+  "&.navmenu-root--inline ": {
+    flexDirection: "column",
+    alignItems: "stretch"
   }
-}));
-// 菜单项 .navmenu-item
-export const NavMenuItem = styled('li', {
-  shouldForwardProp: prop => prop !== '$activeTextColor'
-})(({
-  $activeTextColor,
-  theme
-}) => ({
-  display: 'flex',
-  alignItems: 'center',
-  position: 'relative',
-  padding: '8px 12px',
-  whiteSpace: 'nowrap',
-  cursor: 'pointer',
-  transition: theme.transitions.create('color', {
-    duration: theme.transitions.duration.standard
+})), a = i("li", {
+  shouldForwardProp: (n) => n !== "$activeTextColor"
+})(({ $activeTextColor: n, theme: t }) => ({
+  display: "flex",
+  alignItems: "center",
+  position: "relative",
+  padding: "8px 12px",
+  whiteSpace: "nowrap",
+  cursor: "pointer",
+  transition: t.transitions.create("color", {
+    duration: t.transitions.duration.standard
   }),
-  WebkitTapHighlightColor: 'transparent',
+  WebkitTapHighlightColor: "transparent",
   // 禁用触摸反馈
   // 间距调整
-  '&:first-of-type': {
+  "&:first-of-type": {
     paddingLeft: 0
   },
-  '&:last-of-type': {
+  "&:last-of-type": {
     paddingRight: 0
   },
   // 内部链接
   a: {
-    whiteSpace: 'nowrap',
-    color: 'inherit',
-    textDecoration: 'none',
+    whiteSpace: "nowrap",
+    color: "inherit",
+    textDecoration: "none",
     // 扩大点击区域
-    '&::before': {
-      position: 'absolute',
+    "&::before": {
+      position: "absolute",
       top: 0,
       right: 0,
       bottom: 0,
       left: 0,
-      backgroundColor: 'transparent',
+      backgroundColor: "transparent",
       content: '""'
     }
   },
   // 图标
-  '.navmenu-item__icon': {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginRight: '4px',
-    '& > *': {
-      width: 'auto',
-      height: '22px',
-      maxHeight: '22px',
-      fontSize: '1.5em'
+  ".navmenu-item__icon": {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    marginRight: "4px",
+    "& > *": {
+      width: "auto",
+      height: "22px",
+      maxHeight: "22px",
+      fontSize: "1.5em"
     }
   },
   // 右侧内容
-  '.navmenu-item__content': {
-    height: '32px',
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'center',
-    alignItems: 'flex-start',
-    gap: '5px'
+  ".navmenu-item__content": {
+    height: "32px",
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    alignItems: "flex-start",
+    gap: "5px"
   },
-  '.navmenu-item__label': {
-    display: 'flex',
-    alignItems: 'center',
-    '&-arrow': {
-      marginLeft: '6px',
-      fontSize: '14px',
+  ".navmenu-item__label": {
+    display: "flex",
+    alignItems: "center",
+    "&-arrow": {
+      marginLeft: "6px",
+      fontSize: "14px",
       opacity: 0,
-      transition: theme.transitions.create('opacity', {
-        duration: theme.transitions.duration.standard
+      transition: t.transitions.create("opacity", {
+        duration: t.transitions.duration.standard
       })
     }
   },
-  '.navmenu-item__desc': {
-    fontSize: '14px'
+  ".navmenu-item__desc": {
+    fontSize: "14px"
   },
   // 悬停状态下
-  '&:hover': {
-    color: $activeTextColor
+  "&:hover": {
+    color: n
   },
   // 选中状态下
-  '&.navmenu-item--active': {
-    color: $activeTextColor
+  "&.navmenu-item--active": {
+    color: n
   },
   // Panel 形态下
-  '&.navmenu-item--panel': {
-    padding: '8px 16px',
-    borderRadius: '8px',
-    '.navmenu-item__icon': {
-      width: '32px',
-      height: '32px',
-      marginRight: '16px',
-      border: '1px solid',
-      borderColor: theme.palette.grey[200],
-      borderRadius: '4px',
-      color: theme.palette.grey[500]
+  "&.navmenu-item--panel": {
+    padding: "8px 16px",
+    borderRadius: "8px",
+    ".navmenu-item__icon": {
+      width: "32px",
+      height: "32px",
+      marginRight: "16px",
+      border: "1px solid",
+      borderColor: t.palette.grey[200],
+      borderRadius: "4px",
+      color: t.palette.grey[500]
     },
-    '.navmenu-item__label': {
-      fontSize: '14px',
+    ".navmenu-item__label": {
+      fontSize: "14px",
       lineHeight: 1,
-      color: theme.palette.text.primary
+      color: t.palette.text.primary
     },
-    '.navmenu-item__desc': {
-      fontSize: '12px',
+    ".navmenu-item__desc": {
+      fontSize: "12px",
       lineHeight: 1,
-      color: theme.palette.grey[500]
+      color: t.palette.grey[500]
     },
-    '&:hover': {
-      background: theme.palette.action.hover,
-      transition: theme.transitions.create('background', {
-        duration: theme.transitions.duration.standard
+    "&:hover": {
+      background: t.palette.action.hover,
+      transition: t.transitions.create("background", {
+        duration: t.transitions.duration.standard
       }),
-      '.navmenu-item__label-arrow': {
+      ".navmenu-item__label-arrow": {
         opacity: 1
       },
-      '.navmenu-item__desc': {
-        color: theme.palette.text.primary,
-        transition: theme.transitions.create('color', {
-          duration: theme.transitions.duration.standard
+      ".navmenu-item__desc": {
+        color: t.palette.text.primary,
+        transition: t.transitions.create("color", {
+          duration: t.transitions.duration.standard
         })
       }
     },
-    '&.navmenu-item--active': {
-      background: theme.palette.action.hover
+    "&.navmenu-item--active": {
+      background: t.palette.action.hover
     }
   },
   // inline 布局中
-  '&.navmenu-item--inline': {
+  "&.navmenu-item--inline": {
     margin: 0,
-    padding: '0 16px',
-    minHeight: '48px',
-    lineHeight: '48px',
-    flexWrap: 'wrap'
+    padding: "0 16px",
+    minHeight: "48px",
+    lineHeight: "48px",
+    flexWrap: "wrap"
   }
-}));
-
-// 包含子菜单的导航项 .navmenu-item .navmenu-sub
-export const NavMenuSub = styled(NavMenuItem)(({
-  theme
-}) => ({
-  '.navmenu-item': {
+})), s = i(a)(({ theme: n }) => ({
+  ".navmenu-item": {
     marginLeft: 0,
-    overflow: 'hidden'
+    overflow: "hidden"
   },
-  '& .navmenu-sub__container': {
-    pointerEvents: 'none',
+  "& .navmenu-sub__container": {
+    pointerEvents: "none",
     opacity: 0,
-    position: 'absolute',
-    top: '100%',
+    position: "absolute",
+    top: "100%",
     left: 0,
     zIndex: 1
   },
-  '&.navmenu-sub--opened > .navmenu-sub__container': {
-    pointerEvents: 'auto',
+  "&.navmenu-sub--opened > .navmenu-sub__container": {
+    pointerEvents: "auto",
     opacity: 1,
-    transition: theme.transitions.create('opacity', {
-      duration: theme.transitions.duration.standard,
-      easing: theme.transitions.easing.easeOut
+    transition: n.transitions.create("opacity", {
+      duration: n.transitions.duration.standard,
+      easing: n.transitions.easing.easeOut
     })
   },
   // 扩展图标
-  '.navmenu-sub__expand-icon': {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginLeft: '8px',
-    '& > *': {
-      width: '0.8em',
-      height: '0.8em',
-      transition: theme.transitions.create('transform', {
-        duration: theme.transitions.duration.standard
+  ".navmenu-sub__expand-icon": {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    marginLeft: "8px",
+    "& > *": {
+      width: "0.8em",
+      height: "0.8em",
+      transition: n.transitions.create("transform", {
+        duration: n.transitions.duration.standard
       })
     },
-    '.navmenu-item--inline &': {
-      marginLeft: 'auto'
+    ".navmenu-item--inline &": {
+      marginLeft: "auto"
     }
   },
   // inline 布局
-  '&.navmenu-item--inline': {
-    '.navmenu-sub__container': {
-      position: 'static',
-      transform: 'none',
-      flex: '1 0 100%',
-      margin: '0 -16px',
+  "&.navmenu-item--inline": {
+    ".navmenu-sub__container": {
+      position: "static",
+      transform: "none",
+      flex: "1 0 100%",
+      margin: "0 -16px",
       padding: 0,
       height: 0,
-      overflow: 'hidden',
-      transition: theme.transitions.create('height', {
-        duration: theme.transitions.duration.standard
+      overflow: "hidden",
+      transition: n.transitions.create("height", {
+        duration: n.transitions.duration.standard
       })
     },
-    '&.navmenu-sub--opened > .navmenu-sub__container': {
-      height: 'auto'
+    "&.navmenu-sub--opened > .navmenu-sub__container": {
+      height: "auto"
     },
-    '.navmenu-sub__list': {
+    ".navmenu-sub__list": {
       padding: 0,
-      paddingLeft: '16px',
-      boxShadow: 'none'
+      paddingLeft: "16px",
+      boxShadow: "none"
     },
-    '.navmenu-item__content': {
-      height: '48px'
+    ".navmenu-item__content": {
+      height: "48px"
     }
   }
-}));
-
-// 下拉子菜单 .navmenu-sub__list
-export const NavMenuSubList = styled('ul')(({
-  theme
-}) => ({
+})), p = i("ul")(({ theme: n }) => ({
   margin: 0,
-  padding: '16px',
-  borderRadius: '4px',
-  backgroundColor: theme.palette.background.paper,
-  '& .navmenu-item + .navmenu-item': {
-    marginTop: '8px'
+  padding: "16px",
+  borderRadius: "4px",
+  backgroundColor: n.palette.background.paper,
+  "& .navmenu-item + .navmenu-item": {
+    marginTop: "8px"
   }
-}));
+}));
+export {
+  a as NavMenuItem,
+  r as NavMenuRoot,
+  o as NavMenuStyled,
+  s as NavMenuSub,
+  p as NavMenuSubList
+};

package/lib/NavMenu/sub-container.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { default as React } from 'react';
 interface SubContainerProps extends React.HTMLAttributes<HTMLDivElement> {
     children: React.ReactNode;
     inline?: false | true;

package/lib/NavMenu/sub-container.js

@@ -1,111 +1,70 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useThrottleFn } from 'ahooks';
-import React, { useEffect, useRef, useState } from 'react';
-const paddingTop = 8;
-
-// 下拉子菜单容器
-export function SubContainer({
-  children,
-  inline = false,
-  ...props
-}) {
-  const rootRef = useRef(null);
-  const contentRef = useRef(null);
-  const [positionUpdated, setPositionUpdated] = useState(false);
-  const [position, setPosition] = useState(0); // 只需要保存水平偏移量
-
-  const {
-    run: updatePosition
-  } = useThrottleFn(() => {
-    // 移动端无需计算
-    if (inline) {
-      setPosition(0);
-      if (!positionUpdated) {
-        setPositionUpdated(true);
+import { jsx as h } from "react/jsx-runtime";
+import { useThrottleFn as x } from "ahooks";
+import { useRef as b, useState as m, useEffect as a } from "react";
+const z = 8;
+function L({ children: v, inline: s = !1, ...R }) {
+  const o = b(null), c = b(null), [d, l] = m(!1), [g, f] = m(0), { run: u } = x(
+    () => {
+      if (s) {
+        f(0), d || l(!0);
+        return;
       }
-      return;
-    }
-    if (!rootRef.current || !contentRef.current) return;
-    const anchor = rootRef.current.parentElement; // 以父容器作为参照
-    if (!anchor) return;
-    const anchorRect = anchor.getBoundingClientRect();
-    const contentRect = contentRef.current.getBoundingClientRect();
-    const windowWidth = window.innerWidth;
-    const padding = 32;
-
-    // 1. 计算相对于父元素的水平居中位置
-    let left = (anchorRect.width - contentRect.width) / 2;
-
-    // 2. 检查容器在视口中的绝对位置
-    const absoluteLeft = anchorRect.left + left;
-
-    // 3. 调整水平位置确保不超出窗口
-    if (absoluteLeft < 0) {
-      // 如果超出左边界，向右偏移
-      left = left - absoluteLeft + padding;
-    } else if (absoluteLeft + contentRect.width > windowWidth) {
-      // 如果超出右边界，向左偏移
-      left -= absoluteLeft + contentRect.width - windowWidth + padding;
-    }
-    setPosition(left);
-    if (!positionUpdated) {
-      setPositionUpdated(true);
+      if (!o.current || !c.current) return;
+      const e = o.current.parentElement;
+      if (!e) return;
+      const t = e.getBoundingClientRect(), n = c.current.getBoundingClientRect(), p = window.innerWidth, w = 32;
+      let r = (t.width - n.width) / 2;
+      const i = t.left + r;
+      i < 0 ? r = r - i + w : i + n.width > p && (r -= i + n.width - p + w), f(r), d || l(!0);
+    },
+    {
+      wait: 100
     }
-  }, {
-    wait: 100
-  });
-
-  // 监听自身大小变化
-  useEffect(() => {
-    const resizeObserver = new ResizeObserver(() => {
-      updatePosition();
+  );
+  return a(() => {
+    const e = new ResizeObserver(() => {
+      u();
     });
-    resizeObserver.observe(rootRef.current);
-    return () => resizeObserver.disconnect();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  // 监听 anchor 的大小变化
-  useEffect(() => {
-    const anchor = rootRef.current?.parentElement;
-    let resizeObserver = null;
-    if (anchor) {
-      resizeObserver = new ResizeObserver(() => {
-        updatePosition();
-      });
-      resizeObserver.observe(anchor);
-    }
-    return () => resizeObserver?.disconnect();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  // 监听窗口大小变化
-  useEffect(() => {
-    const handleResize = () => {
-      updatePosition();
+    return e.observe(o.current), () => e.disconnect();
+  }, []), a(() => {
+    var n;
+    const e = (n = o.current) == null ? void 0 : n.parentElement;
+    let t = null;
+    return e && (t = new ResizeObserver(() => {
+      u();
+    }), t.observe(e)), () => t == null ? void 0 : t.disconnect();
+  }, []), a(() => {
+    const e = () => {
+      u();
     };
-    window.addEventListener('resize', handleResize);
-    return () => window.removeEventListener('resize', handleResize);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-  return /*#__PURE__*/_jsx("div", {
-    ref: rootRef,
-    className: "navmenu-sub__container",
-    style: {
-      width: '100%',
-      paddingTop: `${paddingTop}px`,
-      transform: `translateX(${position}px)`,
-      overflow: positionUpdated ? 'visible' : 'hidden'
-    },
-    ...props,
-    children: /*#__PURE__*/_jsx("div", {
+    return window.addEventListener("resize", e), () => window.removeEventListener("resize", e);
+  }, []), /* @__PURE__ */ h(
+    "div",
+    {
+      ref: o,
+      className: "navmenu-sub__container",
       style: {
-        display: inline ? 'block' : 'inline-block',
-        boxShadow: inline ? 'none' : '0px 40px 60px rgba(0, 0, 0, 0.08)'
+        width: "100%",
+        paddingTop: `${z}px`,
+        transform: `translateX(${g}px)`,
+        overflow: d ? "visible" : "hidden"
       },
-      ref: contentRef,
-      children: children
-    })
-  });
+      ...R,
+      children: /* @__PURE__ */ h(
+        "div",
+        {
+          style: {
+            display: s ? "block" : "inline-block",
+            boxShadow: s ? "none" : "0px 40px 60px rgba(0, 0, 0, 0.08)"
+          },
+          ref: c,
+          children: v
+        }
+      )
+    }
+  );
 }
-export default SubContainer;
+export {
+  L as SubContainer,
+  L as default
+};