@kne/react-modal 0.1.10 → 0.1.11

package/dist/index.modern.js

@@ -1,8 +1,8 @@
-import { useRef, useEffect, useState, useCallback, memo, forwardRef, useImperativeHandle, createRef, Children } from 'react';
+import { useEffect, useRef, useState, useCallback, memo, forwardRef, useImperativeHandle, createRef, Children } from 'react';
 import { Modal as Modal$1, App, Button, Drawer as Drawer$1, Tabs } from 'antd';
 import { CloseOutlined, InfoCircleFilled, ExclamationCircleFilled, CloseCircleFilled, CheckCircleFilled } from '@ant-design/icons';
 import classnames from 'classnames';
-import { useMobilePopupMount, useScrollElement } from '@kne/responsive-utils';
+import { usePopupMount, useScrollElement, hoistOutOfModalRoot } from '@kne/responsive-utils';
 import { createWithIntlProvider, useIntl } from '@kne/react-intl';
 import ButtonGroup from '@kne/button-group';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
@@ -125,6 +125,54 @@ const Footer = ({
   });
 };
 
+let parentScrollLockCount = 0;
+let parentScrollLocked = [];
+
+/** Modal / Drawer 共用：锁 body + layout scroll，避免背后页面滚动 */
+const lockParentScroll = getScrollElement => {
+  parentScrollLockCount += 1;
+  if (parentScrollLockCount === 1) {
+    const targets = [document.body];
+    const scrollEl = typeof getScrollElement === 'function' ? getScrollElement() : null;
+    if (scrollEl && scrollEl !== document.body && !targets.includes(scrollEl)) {
+      targets.push(scrollEl);
+    }
+    parentScrollLocked = targets.map(el => {
+      const prev = {
+        overflow: el.style.overflow,
+        overscrollBehavior: el.style.overscrollBehavior
+      };
+      el.style.overflow = 'hidden';
+      el.style.overscrollBehavior = 'none';
+      return {
+        el,
+        prev
+      };
+    });
+  }
+  return () => {
+    parentScrollLockCount = Math.max(0, parentScrollLockCount - 1);
+    if (parentScrollLockCount === 0) {
+      parentScrollLocked.forEach(({
+        el,
+        prev
+      }) => {
+        el.style.overflow = prev.overflow;
+        el.style.overscrollBehavior = prev.overscrollBehavior;
+      });
+      parentScrollLocked = [];
+    }
+  };
+};
+const useLockParentScroll = (enabled, getScrollElement) => {
+  useEffect(() => {
+    if (!enabled) {
+      return undefined;
+    }
+    return lockParentScroll(getScrollElement);
+  }, [enabled, getScrollElement]);
+};
+
 const _excluded$6 = ["children", "footer", "footerButtons", "className", "size", "title", "onClose", "onConfirm", "confirmText", "onCancel", "cancelText", "closable", "noPadding", "bodyScroll", "isMobile", "mobileFullscreen", "fixedModeClass", "wrapClassName", "classNames", "styles", "style", "modalRender"],
   _excluded2$3 = ["width"],
   _excluded3$1 = ["size", "getContainer", "open", "mobileFullscreen", "bodyScroll"],
@@ -149,20 +197,10 @@ const wrapCustomGetContainer$2 = customGetContainer => {
   return () => customGetContainer;
 };
 const VIEWPORT_EXAMPLE_SELECTORS$3 = ['.example-driver-device-scroll'];
-const viewportPopupMountOptions$1 = {
+const viewportPopupMountOptions$3 = {
   cover: 'viewport',
   exampleSelectors: VIEWPORT_EXAMPLE_SELECTORS$3
 };
-const findParentModalMountHost = node => {
-  if (!node || typeof node.closest !== 'function') {
-    return null;
-  }
-  const parentRoot = node.closest('.ant-modal-root');
-  if (!parentRoot) {
-    return null;
-  }
-  return parentRoot.parentElement || (typeof document !== 'undefined' ? document.body : null);
-};
 const resolveModalGetContainer = ({
   customGetContainer,
   getPopupContainer,
@@ -177,58 +215,13 @@ const resolveModalGetContainer = ({
       }
     }
     const from = triggerNode || (typeof getHostNode === 'function' ? getHostNode() : null);
-    const nestedHost = findParentModalMountHost(from);
+    const nestedHost = hoistOutOfModalRoot(from);
     if (nestedHost) {
       return nestedHost;
     }
     return getPopupContainer(triggerNode);
   };
 };
-let parentScrollLockCount$1 = 0;
-let parentScrollLocked$1 = [];
-const lockParentScroll$1 = getScrollElement => {
-  parentScrollLockCount$1 += 1;
-  if (parentScrollLockCount$1 === 1) {
-    const targets = [document.body];
-    const scrollEl = typeof getScrollElement === 'function' ? getScrollElement() : null;
-    if (scrollEl && scrollEl !== document.body && !targets.includes(scrollEl)) {
-      targets.push(scrollEl);
-    }
-    parentScrollLocked$1 = targets.map(el => {
-      const prev = {
-        overflow: el.style.overflow,
-        overscrollBehavior: el.style.overscrollBehavior
-      };
-      el.style.overflow = 'hidden';
-      el.style.overscrollBehavior = 'none';
-      return {
-        el,
-        prev
-      };
-    });
-  }
-  return () => {
-    parentScrollLockCount$1 = Math.max(0, parentScrollLockCount$1 - 1);
-    if (parentScrollLockCount$1 === 0) {
-      parentScrollLocked$1.forEach(({
-        el,
-        prev
-      }) => {
-        el.style.overflow = prev.overflow;
-        el.style.overscrollBehavior = prev.overscrollBehavior;
-      });
-      parentScrollLocked$1 = [];
-    }
-  };
-};
-const useLockParentScroll$1 = (enabled, getScrollElement) => {
-  useEffect(() => {
-    if (!enabled) {
-      return undefined;
-    }
-    return lockParentScroll$1(getScrollElement);
-  }, [enabled, getScrollElement]);
-};
 const sizeStyleVars$1 = (size, hasFooter) => {
   const minBase = size === 'small' ? 300 : 500;
   const chrome = 48 + (hasFooter ? 58 : 0);
@@ -274,6 +267,15 @@ const ModalOuter = ({
     children: children
   });
   const bodyClassName = classnames(modalStyle['modal-body'], 'modal-body');
+  // 移动端全屏：body 用 flex 吃满 title/footer 之间剩余高度，footer 才能贴底；
+  // 勿写死 --kne-modal-body-height（高度受限类会把该值压矮，footer 悬在中间）
+  const bodyStyle = isMobile ? {
+    flex: '1 1 auto',
+    minHeight: 0,
+    height: 'auto'
+  } : {
+    height: 'var(--kne-modal-body-height)'
+  };
   return /*#__PURE__*/jsxs("div", {
     className: classnames(modalStyle['modal-outer'], 'modal-container', {
       [modalStyle['is-mobile']]: isMobile,
@@ -296,12 +298,14 @@ const ModalOuter = ({
       children: title
     }) : null, bodyScroll !== false ? /*#__PURE__*/jsx(SimpleBar, {
       className: bodyClassName,
-      style: {
-        height: 'var(--kne-modal-body-height)'
-      },
+      style: bodyStyle,
       children: bodyInner
     }) : /*#__PURE__*/jsx("div", {
       className: classnames(bodyClassName, modalStyle['body-scroll-off']),
+      style: isMobile ? {
+        flex: '1 1 auto',
+        minHeight: 0
+      } : undefined,
       children: bodyInner
     }), footer === null && footerButtons === undefined ? null : /*#__PURE__*/jsx(Footer, {
       footer: footer,
@@ -444,11 +448,11 @@ const Modal = withLocale(_ref2 => {
     fixedModeClass,
     getPopupContainer,
     anchorRef
-  } = useMobilePopupMount(_extends({}, viewportPopupMountOptions$1, {
+  } = usePopupMount(_extends({}, viewportPopupMountOptions$3, {
     getPopupContainer: wrapCustomGetContainer$2(getContainer)
   }));
   const getScrollElement = useScrollElement();
-  useLockParentScroll$1(!!open, getScrollElement);
+  useLockParentScroll(!!open, getScrollElement);
   const setAnchorRef = node => {
     hostRef.current = node;
     anchorRef(node);
@@ -483,7 +487,7 @@ const useModal = () => {
   const {
     resolveMount,
     getPopupContainer
-  } = useMobilePopupMount(viewportPopupMountOptions$1);
+  } = usePopupMount(viewportPopupMountOptions$3);
   const getScrollElement = useScrollElement();
   return props => {
     const anchor = typeof document !== 'undefined' ? document.activeElement : null;
@@ -491,7 +495,7 @@ const useModal = () => {
       isMobile,
       fixedModeClass
     } = resolveMount(anchor);
-    const unlock = lockParentScroll$1(getScrollElement);
+    const unlock = lockParentScroll(getScrollElement);
     const api = {};
     const {
         afterClose: userAfterClose,
@@ -558,8 +562,10 @@ const DrawerLocaleRoot = withLocale(({
   children
 }) => children);
 const VIEWPORT_EXAMPLE_SELECTORS$2 = ['.example-driver-device-scroll'];
-const boundaryPopupMountOptions$1 = {
-  cover: 'boundary',
+
+// 与 Modal 一致：真机挂 body+fixed；示例框 / container 模式仍走 boundary（usePopupMount 内判定）
+const viewportPopupMountOptions$2 = {
+  cover: 'viewport',
   exampleSelectors: VIEWPORT_EXAMPLE_SELECTORS$2
 };
 const renderWithOptions = (value, options) => {
@@ -609,51 +615,6 @@ const resolveDrawerGetContainer = ({
     return getPopupContainer(triggerNode);
   };
 };
-let parentScrollLockCount = 0;
-let parentScrollLocked = [];
-const lockParentScroll = getScrollElement => {
-  parentScrollLockCount += 1;
-  if (parentScrollLockCount === 1) {
-    const targets = [document.body];
-    const scrollEl = typeof getScrollElement === 'function' ? getScrollElement() : null;
-    if (scrollEl && scrollEl !== document.body && !targets.includes(scrollEl)) {
-      targets.push(scrollEl);
-    }
-    parentScrollLocked = targets.map(el => {
-      const prev = {
-        overflow: el.style.overflow,
-        overscrollBehavior: el.style.overscrollBehavior
-      };
-      el.style.overflow = 'hidden';
-      el.style.overscrollBehavior = 'none';
-      return {
-        el,
-        prev
-      };
-    });
-  }
-  return () => {
-    parentScrollLockCount = Math.max(0, parentScrollLockCount - 1);
-    if (parentScrollLockCount === 0) {
-      parentScrollLocked.forEach(({
-        el,
-        prev
-      }) => {
-        el.style.overflow = prev.overflow;
-        el.style.overscrollBehavior = prev.overscrollBehavior;
-      });
-      parentScrollLocked = [];
-    }
-  };
-};
-const useLockParentScroll = (enabled, getScrollElement) => {
-  useEffect(() => {
-    if (!enabled) {
-      return undefined;
-    }
-    return lockParentScroll(getScrollElement);
-  }, [enabled, getScrollElement]);
-};
 const sizeStyleVars = (size, hasFooter) => {
   const minBase = size === 'small' ? 300 : 500;
   const chrome = 48 + (hasFooter ? 69 : 0);
@@ -890,7 +851,7 @@ const Drawer = withLocale(_ref2 => {
     fixedModeClass,
     getPopupContainer,
     anchorRef
-  } = useMobilePopupMount(_extends({}, boundaryPopupMountOptions$1, {
+  } = usePopupMount(_extends({}, viewportPopupMountOptions$2, {
     getPopupContainer: wrapCustomGetContainer$1(getContainer)
   }));
   const getScrollElement = useScrollElement();
@@ -937,8 +898,10 @@ const usePatchElement = () => {
 const _excluded$4 = ["getContainer", "afterClose"],
   _excluded2$1 = ["afterClose", "getContainer"];
 const VIEWPORT_EXAMPLE_SELECTORS$1 = ['.example-driver-device-scroll'];
-const boundaryPopupMountOptions = {
-  cover: 'boundary',
+
+// 与 Modal / Drawer 一致：真机 viewport；示例框 / container 仍 boundary
+const viewportPopupMountOptions$1 = {
+  cover: 'viewport',
   exampleSelectors: VIEWPORT_EXAMPLE_SELECTORS$1
 };
 const wrapCustomGetContainer = customGetContainer => {
@@ -964,7 +927,7 @@ const HookDrawer = /*#__PURE__*/forwardRef(({
   const {
     getPopupContainer,
     anchorRef
-  } = useMobilePopupMount(_extends({}, boundaryPopupMountOptions, {
+  } = usePopupMount(_extends({}, viewportPopupMountOptions$1, {
     getPopupContainer: wrapCustomGetContainer(innerConfig.getContainer)
   }));
   const close = () => {
@@ -1028,7 +991,7 @@ const useDrawerHolder = () => {
   const {
     resolveMount,
     getPopupContainer
-  } = useMobilePopupMount(boundaryPopupMountOptions);
+  } = usePopupMount(viewportPopupMountOptions$1);
   const getScrollElement = useScrollElement();
   useEffect(() => {
     if (actionQueue.length) {
@@ -1293,7 +1256,7 @@ const useConfirmModal = () => {
   const {
     resolveMount,
     getPopupContainer
-  } = useMobilePopupMount(viewportPopupMountOptions);
+  } = usePopupMount(viewportPopupMountOptions);
   const getScrollElement = useScrollElement();
   return props => {
     const anchor = typeof document !== 'undefined' ? document.activeElement : null;
@@ -1301,7 +1264,7 @@ const useConfirmModal = () => {
       isMobile,
       fixedModeClass
     } = resolveMount(anchor);
-    const unlock = lockParentScroll$1(getScrollElement);
+    const unlock = lockParentScroll(getScrollElement);
     const api = {};
     const {
         afterClose: userAfterClose