@kne/system-layout 0.2.0-alpha.22 → 0.2.0-alpha.24

package/dist/index.modern.js

@@ -10,7 +10,7 @@ import Icon from '@kne/react-icon';
 import ensureSlash from '@kne/ensure-slash';
 import isPlainObject from 'lodash/isPlainObject';
 import VirtualList from 'rc-virtual-list';
-import { useScrollElement, usePopupContainer, useResponsiveContext, useIsMobile, RESPONSIVE_BOUNDARY_CLASS, RESPONSIVE_CONTAINER_CLASS, RESPONSIVE_SCROLL_CLASS, findResponsiveScroll, getDefaultScrollElement, ResponsiveProvider, defaultResponsiveContextValue, IS_MOBILE_QUERY } from '@kne/responsive-utils';
+import { useScrollElement, usePopupContainer, useResponsiveContext, useIsMobile, RESPONSIVE_BOUNDARY_CLASS, RESPONSIVE_CONTAINER_CLASS, RESPONSIVE_SCROLL_CLASS, findResponsiveScroll, findScrollParent, getDefaultScrollElement, ResponsiveProvider, IS_MOBILE_QUERY } from '@kne/responsive-utils';
 export { MOBILE_BREAKPOINT, RESPONSIVE_BOUNDARY_CLASS, RESPONSIVE_CONTAINER_CLASS, RESPONSIVE_SCROLL_CLASS, ResponsiveProvider, MOBILE_BREAKPOINT as mobileBreakpoint, useBreakpoint, useIsMobile, useMediaQuery, usePopupContainer, useResponsiveContext, useScrollElement } from '@kne/responsive-utils';
 import defaultLogo from './defaultLogo~beHinxEU.svg';
 import { ReactComponent } from './expand~bdCTnjYJ.svg';
@@ -535,16 +535,19 @@ const ErrorBoundary = props => {
   }));
 };
 
-const hasParentResponsiveProvider = parent => {
-  return parent.getBoundaryElement !== defaultResponsiveContextValue.getBoundaryElement || parent.getScrollElement !== defaultResponsiveContextValue.getScrollElement;
-};
 const resolvePageScrollElement = (pageScrollRef, openScrollbar, deviceIsMobile) => {
   if (deviceIsMobile && !openScrollbar) {
     const _anchor = pageScrollRef.current;
-    if (_anchor && _anchor.parentElement) {
-      const parentScroll = findResponsiveScroll(_anchor.parentElement);
-      if (parentScroll) {
-        return parentScroll;
+    if (_anchor) {
+      // example 手机外框：滚动在 SimpleBar wrapper 上；class 可能晚于首帧挂上，
+      // findScrollParent 不依赖 kne-responsive-scroll，避免 is-scrolled 监听绑错。
+      const marked = findResponsiveScroll(_anchor.parentElement || _anchor);
+      if (marked) {
+        return marked;
+      }
+      const scrollParent = findScrollParent(_anchor);
+      if (scrollParent) {
+        return scrollParent;
       }
     }
     return getDefaultScrollElement();
@@ -561,6 +564,10 @@ const resolvePageScrollElement = (pageScrollRef, openScrollbar, deviceIsMobile)
   }
   return findResponsiveScroll(anchor) || getDefaultScrollElement();
 };
+
+// 始终覆盖本页 scroller（否则嵌套在 Global 下 sticky 会绑到 body）。
+// container 模式（example 手机外框）保留外层 boundary，toolbar/menu 才能 portal 到
+// .example-driver-device-scroll（非滚动内容区），absolute/fixed 相对手机视口生效。
 const LayoutResponsiveScope = ({
   boundaryRef,
   scrollRef,
@@ -568,13 +575,17 @@ const LayoutResponsiveScope = ({
   children
 }) => {
   const parent = useResponsiveContext();
-  if (hasParentResponsiveProvider(parent)) {
-    return children;
-  }
+  const inheritBoundary = parent.mode === 'container';
   return /*#__PURE__*/jsx(ResponsiveProvider, {
+    mode: parent.mode,
+    containerWidth: parent.containerWidth,
     boundaryRef: boundaryRef,
     scrollRef: scrollRef,
     getScrollElement: getScrollElement,
+    getBoundaryElement: inheritBoundary ? () => {
+      const fromParent = typeof parent.getBoundaryElement === 'function' ? parent.getBoundaryElement() : null;
+      return fromParent || null;
+    } : undefined,
     children: children
   });
 };
@@ -957,7 +968,7 @@ const Layout = ({
   });
 };
 
-var style = {"page":"kne-system-layout_c1kXt","page-header":"kne-system-layout_h-YXH","is-scrolled":"kne-system-layout_dEXMy","page-title-outer":"kne-system-layout_jhcGo","capsule-click":"kne-system-layout_Ps1FA","page-title-extra":"kne-system-layout_mKsLu","page-title":"kne-system-layout_IOVGr","page-top":"kne-system-layout_Y1y7o","page-inner":"kne-system-layout_wHWje","no-padding":"kne-system-layout_tBnAD","is-mobile":"kne-system-layout_yRZMx","page-loading":"kne-system-layout_vcf3J","page-bottom":"kne-system-layout_vXk1s","back-icon":"kne-system-layout_07Mna"};
+var style = {"page":"kne-system-layout_c1kXt","page-header":"kne-system-layout_h-YXH","is-viewport":"kne-system-layout_XjOj5","is-boundary":"kne-system-layout_Q-5NT","page-title-outer":"kne-system-layout_jhcGo","page-title":"kne-system-layout_IOVGr","page-title-extra":"kne-system-layout_mKsLu","page-title-actions":"kne-system-layout_XTAI-","is-scrolled":"kne-system-layout_dEXMy","capsule-click":"kne-system-layout_Ps1FA","back-icon":"kne-system-layout_07Mna","has-float":"kne-system-layout_SD6-j","page-top":"kne-system-layout_Y1y7o","page-inner":"kne-system-layout_wHWje","no-padding":"kne-system-layout_tBnAD","is-mobile":"kne-system-layout_yRZMx","page-header-boundary-overlay":"kne-system-layout_4pjtx","page-loading":"kne-system-layout_vcf3J","page-bottom":"kne-system-layout_vXk1s"};
 
 const PageLoading = () => {
   return /*#__PURE__*/jsx(Flex, {
@@ -991,8 +1002,15 @@ const Page = ({
   } = useContext();
   const navigate = useNavigate();
   const getScrollElement = useScrollElement();
+  const getBoundaryElement = usePopupContainer();
+  const {
+    mode
+  } = useResponsiveContext();
   const navbarRef = useRef(null);
   const [isScrolled, setIsScrolled] = useState(false);
+  const useBoundaryMount = deviceIsMobile && mode === 'container';
+  const useViewportFixed = deviceIsMobile && mode !== 'container';
+  const boundaryTarget = useBoundaryMount ? getBoundaryElement() : null;
   useEffect(() => {
     setToolbarShow && setToolbarShow(!!_toolbar);
     setNavbarShow && setNavbarShow(!!_navbar);
@@ -1001,35 +1019,103 @@ const Page = ({
     if (!deviceIsMobile || !_navbar) {
       return;
     }
-    const scrollEl = getScrollElement();
-    if (!scrollEl || typeof scrollEl.addEventListener !== 'function') {
-      return;
-    }
-    const handleScroll = () => {
-      const threshold = navbarRef.current ? navbarRef.current.offsetHeight : 48;
-      setIsScrolled(scrollEl.scrollTop > threshold);
+    let boundEl = null;
+    let remove = null;
+    const bind = () => {
+      const scrollEl = getScrollElement();
+      if (!scrollEl || typeof scrollEl.addEventListener !== 'function' || scrollEl === boundEl) {
+        return;
+      }
+      if (typeof remove === 'function') {
+        remove();
+      }
+      boundEl = scrollEl;
+      const handleScroll = () => {
+        const threshold = navbarRef.current ? navbarRef.current.offsetHeight : 48;
+        setIsScrolled(scrollEl.scrollTop > threshold);
+      };
+      handleScroll();
+      scrollEl.addEventListener('scroll', handleScroll, {
+        passive: true
+      });
+      remove = () => scrollEl.removeEventListener('scroll', handleScroll);
+    };
+    bind();
+    // SimpleBar / kne-responsive-scroll 可能在下一帧才就绪，补一次绑定
+    const raf = requestAnimationFrame(bind);
+    return () => {
+      cancelAnimationFrame(raf);
+      if (typeof remove === 'function') {
+        remove();
+      }
     };
-    handleScroll();
-    scrollEl.addEventListener('scroll', handleScroll, {
-      passive: true
-    });
-    return () => scrollEl.removeEventListener('scroll', handleScroll);
   }, [deviceIsMobile, _navbar, getScrollElement, scrollReady]);
-  const navbarEl = _navbar ? /*#__PURE__*/jsxs(Flex, {
+  const titleExtraContent = (() => {
+    if (_extra) {
+      if (deviceIsMobile && userAvatar) {
+        return /*#__PURE__*/jsxs(Flex, {
+          gap: 4,
+          align: "center",
+          children: [_extra, /*#__PURE__*/jsx(Image.Avatar, {
+            id: userAvatar,
+            src: userAvatar,
+            shape: "circle",
+            size: 30,
+            alt: "avatar"
+          })]
+        });
+      }
+      return _extra;
+    }
+    if (deviceIsMobile && (buttonProps || userAvatar)) {
+      const actions = buttonProps ? /*#__PURE__*/jsx("div", {
+        className: classnames('page-title-actions', style['page-title-actions']),
+        children: /*#__PURE__*/jsx(ButtonGroup, _extends({}, Object.assign({}, buttonProps, {
+          showLength: 0,
+          moreType: 'link'
+        })))
+      }) : null;
+      const avatar = userAvatar ? /*#__PURE__*/jsx(Image.Avatar, {
+        id: userAvatar,
+        src: userAvatar,
+        shape: "circle",
+        size: 30,
+        alt: "avatar"
+      }) : null;
+      // 仅更多按钮时不要套带 gap 的 Flex，否则 ButtonGroup 测宽空节点也会吃 gap，导致不居中
+      if (actions && avatar) {
+        return /*#__PURE__*/jsxs(Flex, {
+          gap: 4,
+          align: "center",
+          children: [actions, avatar]
+        });
+      }
+      return actions || avatar;
+    }
+    if (buttonProps) {
+      return /*#__PURE__*/jsx(ButtonGroup, _extends({}, buttonProps));
+    }
+    return null;
+  })();
+  const navbarInner = _navbar ? /*#__PURE__*/jsxs(Flex, {
     ref: navbarRef,
     justify: "space-between",
     align: "center",
     gap: 20,
     className: classnames('page-header', style['page-header'], {
+      ['is-mobile']: deviceIsMobile,
+      [style['is-mobile']]: deviceIsMobile,
       ['is-scrolled']: isScrolled,
-      [style['is-scrolled']]: isScrolled
+      [style['is-scrolled']]: isScrolled,
+      [style['is-boundary']]: useBoundaryMount && !!boundaryTarget,
+      [style['is-viewport']]: useViewportFixed || useBoundaryMount && !boundaryTarget
     }),
     children: [/*#__PURE__*/jsxs(Flex, {
       className: classnames('page-title-outer', style['page-title-outer']),
       align: "center",
       gap: 4,
       children: [back && /*#__PURE__*/jsx(Button, {
-        type: "text",
+        type: "link",
         icon: /*#__PURE__*/jsx(Icon, {
           className: style['back-icon'],
           type: "a-Typearrow_forward_ios",
@@ -1052,24 +1138,19 @@ const Page = ({
         className: classnames('page-title', style['page-title']),
         children: title
       })]
-    }), /*#__PURE__*/jsx("div", {
-      className: classnames('page-title-extra', style['page-title-extra']),
-      children: _extra ? _extra : deviceIsMobile ? /*#__PURE__*/jsxs(Flex, {
-        gap: 4,
-        align: "center",
-        children: [buttonProps && /*#__PURE__*/jsx(ButtonGroup, _extends({}, Object.assign({}, buttonProps, deviceIsMobile ? {
-          showLength: 0,
-          moreType: 'link'
-        } : {}))), /*#__PURE__*/jsx(Image.Avatar, {
-          id: userAvatar,
-          src: userAvatar,
-          shape: "circle",
-          size: 30,
-          alt: "avatar"
-        })]
-      }) : buttonProps && /*#__PURE__*/jsx(ButtonGroup, _extends({}, buttonProps))
-    })]
+    }), titleExtraContent ? /*#__PURE__*/jsx("div", {
+      className: classnames('page-title-extra', style['page-title-extra'], style['has-float']),
+      children: titleExtraContent
+    }) : null]
   }) : null;
+  const navbarEl = navbarInner && useBoundaryMount && boundaryTarget ? /*#__PURE__*/createPortal(/*#__PURE__*/jsx("div", {
+    className: classnames('page-header-boundary-overlay', style['page-header-boundary-overlay']),
+    style: {
+      '--safe-area-inset-top': 'env(safe-area-inset-top)',
+      '--safe-area-inset-bottom': 'env(safe-area-inset-bottom)'
+    },
+    children: navbarInner
+  }), boundaryTarget) : navbarInner;
   const pageInnerClassNameOrigin = classnames('page-inner', style['page-inner']);
   const pageInnerClassName = classnames(pageInnerClassNameOrigin, {
     ['no-padding']: noPadding,
@@ -1127,7 +1208,7 @@ const isMobile = () => {
 const transparentBgContainer = {
   colorBgContainer: 'transparent'
 };
-const transparentBgContainerComponents = ['Input', 'InputNumber', 'Card', 'Tree', 'Select', 'DatePicker'];
+const transparentBgContainerComponents = ['Input', 'InputNumber', 'Card', 'Tree', 'Select', 'DatePicker', 'Tabs'];
 const themeToken = {
   components: merge({}, transform(transparentBgContainerComponents, (result, component) => {
     result[component] = transparentBgContainer;