@kne/react-modal 0.1.10 → 0.1.12

package/dist/index.modern.js

@@ -1,8 +1,8 @@
-import { useRef, useEffect, useState, useCallback, memo, forwardRef, useImperativeHandle, createRef, Children } from 'react';
-import { Modal as Modal$1, App, Button, Drawer as Drawer$1, Tabs } from 'antd';
+import { useEffect, useState, useCallback, createContext, useContext, useMemo, useRef, createRef, forwardRef, useImperativeHandle, memo, Children } from 'react';
+import { Modal as Modal$1, Button, Drawer as Drawer$1, App, 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';
@@ -51,7 +51,7 @@ const withLocale = createWithIntlProvider({
 
 var modalStyle = {"kne-responsive-boundary":"kne-react-modal_gh14z","kne-responsive-scroll":"kne-react-modal_Kfn6L","modal":"kne-react-modal_Bk7-B","small":"kne-react-modal_DZGD6","large":"kne-react-modal_9sz-n","modal-body-inner":"kne-react-modal_fFnva","is-mobile":"kne-react-modal_LtgJz","modal-container":"kne-react-modal_aEoZq","modal-antd-header":"kne-react-modal_54n8W","modal-antd-footer":"kne-react-modal_AJ9pV","modal-antd-body":"kne-react-modal_u2IjN","modal-outer":"kne-react-modal_kkILR","no-title":"kne-react-modal_8Iysr","no-footer":"kne-react-modal_VMxik","no-padding":"kne-react-modal_Fof-N","modal-title":"kne-react-modal_tG9MF","modal-body":"kne-react-modal_W-QFz","modal-footer":"kne-react-modal_meVfy","body-scroll-off":"kne-react-modal_l627I","is-embedded-footer":"kne-react-modal_17Eih","modal-footer-extra":"kne-react-modal_Fx8Z-","modal-footer-actions":"kne-react-modal_V3ZrX","modal-close":"kne-react-modal_-EK8N","modal-host":"kne-react-modal_eNb-h","modal-form-host":"kne-react-modal_Js8cf","modal-wrap":"kne-react-modal_3Sju5","modal-wrap-centered":"kne-react-modal_-qCIk","modal-wrap-fullscreen":"kne-react-modal_8lS2G","modal-mask-fullscreen":"kne-react-modal_XfLOC"};
 
-const _excluded$7 = ["ButtonComponent", "onClick", "autoClose", "display"];
+const _excluded$8 = ["ButtonComponent", "onClick", "autoClose", "display"];
 const Footer = ({
   footer,
   footerButtons,
@@ -90,7 +90,7 @@ const Footer = ({
         onClick,
         autoClose = true
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$8);
     return _extends({}, props, {
       buttonComponent: ButtonComponent,
       onClick: async (...args) => {
@@ -125,11 +125,100 @@ const Footer = ({
   });
 };
 
-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"],
-  _excluded4 = ["afterClose", "getContainer", "onClose", "onConfirm", "onCancel"],
-  _excluded5 = ["children", "getContainer", "afterClose"];
+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 usePatchElement = () => {
+  const [elements, setElements] = useState([]);
+  const patchElement = useCallback(element => {
+    setElements(originElements => [...originElements, element]);
+    return () => {
+      setElements(originElements => originElements.filter(ele => ele !== element));
+    };
+  }, []);
+  return [elements, patchElement];
+};
+
+const ModalLayerContext = /*#__PURE__*/createContext(null);
+const useModalLayer = () => useContext(ModalLayerContext);
+
+/**
+ * 挂在 Modal 内容树内（antd ZIndexContext 之下），
+ * 使就近 useModal 打开的内层成为本层 React 子树，从而自动叠层。
+ */
+const ModalLayerProvider = ({
+  children
+}) => {
+  const [elements, patchElement] = usePatchElement();
+  const value = useMemo(() => ({
+    patchElement
+  }), [patchElement]);
+  return /*#__PURE__*/jsxs(ModalLayerContext.Provider, {
+    value: value,
+    children: [children, elements]
+  });
+};
+
+/** 根级命令式打开（页面首次弹层）；不包 ModalLayerContext。 */
+const rootModalPatchRef = {
+  current: null
+};
+const ModalContextHolder = () => {
+  const [elements, patchElement] = usePatchElement();
+  rootModalPatchRef.current = patchElement;
+  return /*#__PURE__*/jsx(Fragment, {
+    children: elements
+  });
+};
+
+const _excluded$7 = ["children", "footer", "footerButtons", "className", "size", "title", "onClose", "onConfirm", "confirmText", "onCancel", "cancelText", "closable", "noPadding", "bodyScroll", "isMobile", "mobileFullscreen", "fixedModeClass", "wrapClassName", "classNames", "styles", "style", "modalRender"],
+  _excluded2$4 = ["width"],
+  _excluded3$1 = ["size", "getContainer", "open", "mobileFullscreen", "bodyScroll"];
 const ModalLocaleRoot = withLocale(({
   children
 }) => children);
@@ -149,20 +238,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,59 +256,15 @@ 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) => {
+  // body 最低高度随 size：small 基准 300，default/large 基准 500（再扣 title/footer chrome）
   const minBase = size === 'small' ? 300 : 500;
   const chrome = 48 + (hasFooter ? 58 : 0);
   const minHeight = `${Math.max(0, minBase - chrome)}px`;
@@ -274,6 +309,19 @@ const ModalOuter = ({
     children: children
   });
   const bodyClassName = classnames(modalStyle['modal-body'], 'modal-body');
+  // 移动端全屏：body 用 flex 吃满 title/footer 之间剩余高度，footer 才能贴底；
+  // 桌面默认：height:auto + max-height，短内容不撑满；bodyScroll=false 仍写死满高供 Tabs/分栏
+  const bodyStyle = isMobile ? {
+    flex: '1 1 auto',
+    minHeight: 0,
+    height: 'auto'
+  } : bodyScroll !== false ? {
+    height: 'auto',
+    maxHeight: 'var(--kne-modal-body-max-height)',
+    minHeight: 'var(--kne-modal-body-min-height)'
+  } : {
+    height: 'var(--kne-modal-body-height)'
+  };
   return /*#__PURE__*/jsxs("div", {
     className: classnames(modalStyle['modal-outer'], 'modal-container', {
       [modalStyle['is-mobile']]: isMobile,
@@ -296,12 +344,11 @@ 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: bodyStyle,
       children: bodyInner
     }), footer === null && footerButtons === undefined ? null : /*#__PURE__*/jsx(Footer, {
       footer: footer,
@@ -342,14 +389,14 @@ const computedCommonProps = _ref => {
       style: propsStyle,
       modalRender
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$6);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
   const useMobileLayout = isMobile && mobileFullscreen !== false;
   const hasFooter = !(footer === null && footerButtons === undefined);
   const sizeVars = sizeStyleVars$1(size, hasFooter);
   const {
       width
     } = sizeVars,
-    cssVars = _objectWithoutPropertiesLoose(sizeVars, _excluded2$3);
+    cssVars = _objectWithoutPropertiesLoose(sizeVars, _excluded2$4);
   const runChildren = options => {
     const opts = Object.assign({}, options, {
       close: onClose
@@ -424,8 +471,11 @@ const computedCommonProps = _ref => {
         overflow: 'hidden'
       } : null)
     }),
+    // LayerProvider 须在 antd Modal 内容树内（ZIndexContext 下），内层命令式才能自动 +100
     children: /*#__PURE__*/jsx(ModalLocaleRoot, {
-      children: runChildren({})
+      children: /*#__PURE__*/jsx(ModalLayerProvider, {
+        children: runChildren({})
+      })
     })
   });
 };
@@ -444,11 +494,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);
@@ -476,77 +526,119 @@ const Modal = withLocale(_ref2 => {
     }))]
   });
 });
-const useModal = () => {
-  const {
-    modal
-  } = App.useApp();
+
+const _excluded$6 = ["afterClose", "onClose", "onConfirm", "onCancel"],
+  _excluded2$3 = ["afterClose"];
+let hookModalUuid = 0;
+const HookModal = /*#__PURE__*/forwardRef(({
+  config,
+  afterClose: hookAfterClose
+}, ref) => {
+  const [open, setOpen] = useState(true);
+  const [innerConfig, setInnerConfig] = useState(config);
+  const close = () => {
+    setOpen(false);
+  };
+  useImperativeHandle(ref, () => ({
+    destroy: close,
+    update: newConfig => {
+      setInnerConfig(origin => Object.assign({}, origin, typeof newConfig === 'function' ? newConfig(origin) : newConfig));
+    }
+  }));
   const {
-    resolveMount,
-    getPopupContainer
-  } = useMobilePopupMount(viewportPopupMountOptions$1);
+      afterClose: userAfterClose,
+      onClose: userOnClose,
+      onConfirm: userOnConfirm,
+      onCancel: userOnCancel
+    } = innerConfig,
+    restConfig = _objectWithoutPropertiesLoose(innerConfig, _excluded$6);
+  return /*#__PURE__*/jsx(Modal, _extends({}, restConfig, {
+    open: open,
+    onClose: () => {
+      userOnClose == null || userOnClose();
+      close();
+    },
+    onCancel: (...args) => {
+      userOnCancel == null || userOnCancel(...args);
+      close();
+    },
+    onConfirm: async (...args) => {
+      const res = await Promise.resolve(userOnConfirm == null ? void 0 : userOnConfirm(...args));
+      if (res !== false) {
+        close();
+      }
+      return res;
+    },
+    afterClose: (...args) => {
+      hookAfterClose == null || hookAfterClose(...args);
+      userAfterClose == null || userAfterClose(...args);
+    }
+  }));
+});
+
+/**
+ * 命令式内容弹窗：就近 patch 到 ModalLayerProvider（多层）或根 ModalContextHolder。
+ * 不走 App.modal.info / ConfirmDialog，层级交给 antd ZIndexContext。
+ */
+const useModal = () => {
+  const layer = useContext(ModalLayerContext);
   const getScrollElement = useScrollElement();
-  return props => {
-    const anchor = typeof document !== 'undefined' ? document.activeElement : null;
-    const {
-      isMobile,
-      fixedModeClass
-    } = resolveMount(anchor);
-    const unlock = lockParentScroll$1(getScrollElement);
+  const [actionQueue, setActionQueue] = useState([]);
+  useEffect(() => {
+    if (actionQueue.length) {
+      const cloneQueue = [...actionQueue];
+      cloneQueue.forEach(action => action());
+      setActionQueue([]);
+    }
+  }, [actionQueue]);
+  return useCallback(props => {
+    hookModalUuid += 1;
+    const modalRef = /*#__PURE__*/createRef();
     const api = {};
-    const {
-        afterClose: userAfterClose,
-        getContainer: customGetContainer,
-        onClose: userOnClose,
-        onConfirm: userOnConfirm,
-        onCancel: userOnCancel
-      } = props,
-      restProps = _objectWithoutPropertiesLoose(props, _excluded4);
-    const closeModal = () => {
-      api.close == null || api.close();
-    };
-    const _computedCommonProps = computedCommonProps(_extends({}, restProps, {
-        isMobile,
-        fixedModeClass,
-        onClose: () => {
-          userOnClose == null || userOnClose();
-          closeModal();
-        },
-        onCancel: (...args) => {
-          userOnCancel == null || userOnCancel(...args);
-          closeModal();
-        },
-        onConfirm: async (...args) => {
-          const res = await Promise.resolve(userOnConfirm == null ? void 0 : userOnConfirm(...args));
-          if (res !== false) {
-            closeModal();
+    let closeFunc;
+    let unlock = () => {};
+    const resolvePatch = () => (layer == null ? void 0 : layer.patchElement) || rootModalPatchRef.current;
+    const runOpen = () => {
+      const patch = resolvePatch();
+      if (typeof patch !== 'function') {
+        throw new Error('useModal requires <ModalContextHolder /> mounted inside <App> before calling useModal()');
+      }
+      unlock = lockParentScroll(getScrollElement);
+      const {
+          afterClose: userAfterClose
+        } = props,
+        restProps = _objectWithoutPropertiesLoose(props, _excluded2$3);
+      const modalEl = /*#__PURE__*/jsx(HookModal, {
+        ref: modalRef,
+        config: _extends({}, restProps, {
+          afterClose: (...args) => {
+            unlock();
+            userAfterClose == null || userAfterClose(...args);
           }
-          return res;
-        },
-        afterClose: (...args) => {
-          unlock();
-          userAfterClose == null || userAfterClose(...args);
+        }),
+        afterClose: () => {
+          closeFunc && closeFunc();
         }
-      })),
-      {
-        children,
-        getContainer,
-        afterClose
-      } = _computedCommonProps,
-      otherProps = _objectWithoutPropertiesLoose(_computedCommonProps, _excluded5);
-    const {
-      destroy
-    } = modal.info(_extends({}, otherProps, {
-      afterClose,
-      content: children,
-      getContainer: resolveModalGetContainer({
-        customGetContainer: customGetContainer != null ? customGetContainer : getContainer,
-        getPopupContainer,
-        getHostNode: () => anchor
-      })
-    }));
-    api.close = destroy;
+      }, `react-modal-${hookModalUuid}`);
+      closeFunc = patch(modalEl);
+    };
+    if (resolvePatch()) {
+      runOpen();
+    } else {
+      setActionQueue(prev => [...prev, runOpen]);
+    }
+    api.close = () => {
+      if (modalRef.current) {
+        modalRef.current.destroy();
+      } else {
+        setActionQueue(prev => [...prev, () => {
+          var _modalRef$current;
+          return (_modalRef$current = modalRef.current) == null ? void 0 : _modalRef$current.destroy();
+        }]);
+      }
+    };
     return api;
-  };
+  }, [getScrollElement, layer]);
 };
 
 var style = {"kne-responsive-boundary":"kne-react-modal_qwqLr","kne-responsive-scroll":"kne-react-modal_vmry7","drawer":"kne-react-modal_cDsbq","small":"kne-react-modal_3QgK-","is-mobile":"kne-react-modal_FFf73","large":"kne-react-modal_8lell","drawer-body-inner":"kne-react-modal_xgX4D","drawer-antd-header":"kne-react-modal_3EUxr","drawer-antd-footer":"kne-react-modal_2G81L","drawer-antd-body":"kne-react-modal_eKVMu","drawer-outer":"kne-react-modal_P3Cw8","no-title":"kne-react-modal_upRot","no-footer":"kne-react-modal_j4sGu","no-padding":"kne-react-modal_pg37M","drawer-title":"kne-react-modal_-hw5V","drawer-body":"kne-react-modal_nJj7Y","body-scroll-off":"kne-react-modal_2Wh1H","modal-footer-extra":"kne-react-modal_M4hy9","drawer-close":"kne-react-modal_dVh38","drawer-host":"kne-react-modal_Nsxi9","drawer-host-render":"kne-react-modal_iGDWP","drawer-panel-host":"kne-react-modal_A0h-2","drawer-panel-body":"kne-react-modal_E4tcc","drawer-form-host":"kne-react-modal_vKkQW","drawer-wrapper-mobile":"kne-react-modal_vsxOs","drawer-wrapper-mobile-vertical":"kne-react-modal_HG8Vz","drawer-root-mobile":"kne-react-modal_G-qXe"};
@@ -558,8 +650,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 +703,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 +939,7 @@ const Drawer = withLocale(_ref2 => {
     fixedModeClass,
     getPopupContainer,
     anchorRef
-  } = useMobilePopupMount(_extends({}, boundaryPopupMountOptions$1, {
+  } = usePopupMount(_extends({}, viewportPopupMountOptions$2, {
     getPopupContainer: wrapCustomGetContainer$1(getContainer)
   }));
   const getScrollElement = useScrollElement();
@@ -923,22 +972,13 @@ const Drawer = withLocale(_ref2 => {
   });
 });
 
-const usePatchElement = () => {
-  const [elements, setElements] = useState([]);
-  const patchElement = useCallback(element => {
-    setElements(originElements => [...originElements, element]);
-    return () => {
-      setElements(originElements => originElements.filter(ele => ele !== element));
-    };
-  }, []);
-  return [elements, patchElement];
-};
-
 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 +1004,7 @@ const HookDrawer = /*#__PURE__*/forwardRef(({
   const {
     getPopupContainer,
     anchorRef
-  } = useMobilePopupMount(_extends({}, boundaryPopupMountOptions, {
+  } = usePopupMount(_extends({}, viewportPopupMountOptions$1, {
     getPopupContainer: wrapCustomGetContainer(innerConfig.getContainer)
   }));
   const close = () => {
@@ -1028,7 +1068,7 @@ const useDrawerHolder = () => {
   const {
     resolveMount,
     getPopupContainer
-  } = useMobilePopupMount(boundaryPopupMountOptions);
+  } = usePopupMount(viewportPopupMountOptions$1);
   const getScrollElement = useScrollElement();
   useEffect(() => {
     if (actionQueue.length) {
@@ -1249,41 +1289,46 @@ const mapConfirmProps = (props, {
     icon,
     isMobile
   });
+
+  // Confirm 走 antd ConfirmDialog：未传 zIndex 时用 static 顶层，适合真确认框盖住内容弹窗
+  const config = _extends({}, otherProps, {
+    okText: confirmText != null ? confirmText : otherProps.okText,
+    cancelText: cancelText != null ? cancelText : otherProps.cancelText,
+    onOk: onConfirm != null ? onConfirm : otherProps.onOk,
+    onCancel: onCancel != null ? onCancel : otherProps.onCancel,
+    getContainer: resolveModalGetContainer({
+      customGetContainer,
+      getPopupContainer,
+      getHostNode: () => anchor
+    }),
+    centered: true,
+    afterClose: (...args) => {
+      unlock();
+      userAfterClose && userAfterClose(...args);
+      afterClose && afterClose(...args);
+    },
+    icon: null,
+    classNames: {
+      mask: classnames(isMobile && modalStyle['modal-mask-fullscreen'], isMobile && fixedModeClass, (_otherProps$className = otherProps.classNames) == null ? void 0 : _otherProps$className.mask)
+    },
+    wrapClassName: classnames(modalStyle['modal-wrap'], modalStyle['modal-wrap-centered'], confirmStyle['confirm-modal-wrap'], wrapClassName, {
+      [confirmStyle['is-danger']]: danger,
+      [confirmStyle['is-mobile']]: isMobile,
+      [fixedModeClass]: isMobile
+    }),
+    title: confirmTitle ? /*#__PURE__*/jsx(ConfirmLocaleRoot, {
+      children: confirmTitle
+    }) : null,
+    content: /*#__PURE__*/jsx(ConfirmLocaleRoot, {
+      children: content
+    })
+  });
+  if (zIndex !== undefined) {
+    config.zIndex = zIndex;
+  }
   return {
     modalMethod: type,
-    config: _extends({}, otherProps, {
-      zIndex: zIndex != null ? zIndex : 1100,
-      okText: confirmText != null ? confirmText : otherProps.okText,
-      cancelText: cancelText != null ? cancelText : otherProps.cancelText,
-      onOk: onConfirm != null ? onConfirm : otherProps.onOk,
-      onCancel: onCancel != null ? onCancel : otherProps.onCancel,
-      getContainer: resolveModalGetContainer({
-        customGetContainer,
-        getPopupContainer,
-        getHostNode: () => anchor
-      }),
-      centered: true,
-      afterClose: (...args) => {
-        unlock();
-        userAfterClose && userAfterClose(...args);
-        afterClose && afterClose(...args);
-      },
-      icon: null,
-      classNames: {
-        mask: classnames(isMobile && modalStyle['modal-mask-fullscreen'], isMobile && fixedModeClass, (_otherProps$className = otherProps.classNames) == null ? void 0 : _otherProps$className.mask)
-      },
-      wrapClassName: classnames(modalStyle['modal-wrap'], modalStyle['modal-wrap-centered'], confirmStyle['confirm-modal-wrap'], wrapClassName, {
-        [confirmStyle['is-danger']]: danger,
-        [confirmStyle['is-mobile']]: isMobile,
-        [fixedModeClass]: isMobile
-      }),
-      title: confirmTitle ? /*#__PURE__*/jsx(ConfirmLocaleRoot, {
-        children: confirmTitle
-      }) : null,
-      content: /*#__PURE__*/jsx(ConfirmLocaleRoot, {
-        children: content
-      })
-    })
+    config
   };
 };
 const useConfirmModal = () => {
@@ -1293,7 +1338,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 +1346,7 @@ const useConfirmModal = () => {
       isMobile,
       fixedModeClass
     } = resolveMount(anchor);
-    const unlock = lockParentScroll$1(getScrollElement);
+    const unlock = lockParentScroll(getScrollElement);
     const api = {};
     const {
         afterClose: userAfterClose
@@ -1406,5 +1451,5 @@ const modalClassNames = {
   splitter: 'react-modal-splitter'
 };
 
-export { ColumnsLayout, Drawer, DrawerContextHolder, ScrollRegion, TabsLayout, createDrawerRender, createModalRender, Modal as default, modalClassNames, useConfirmModal, useDrawer, useModal };
+export { ColumnsLayout, Drawer, DrawerContextHolder, ModalContextHolder, ModalLayerContext, ScrollRegion, TabsLayout, createDrawerRender, createModalRender, Modal as default, modalClassNames, useConfirmModal, useDrawer, useModal, useModalLayer };
 //# sourceMappingURL=index.modern.js.map