@kne/react-modal 0.1.11 → 0.1.13

package/dist/index.modern.js

@@ -1,8 +1,8 @@
-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 { 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 { usePopupMount, useScrollElement, hoistOutOfModalRoot } from '@kne/responsive-utils';
+import { usePopupMount, useScrollElement, hoistOutOfModalRoot, findExamplePhoneMountNode } 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) => {
@@ -173,11 +173,52 @@ const useLockParentScroll = (enabled, 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"],
-  _excluded4 = ["afterClose", "getContainer", "onClose", "onConfirm", "onCancel"],
-  _excluded5 = ["children", "getContainer", "afterClose"];
+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", "isMobile", "fixedModeClass"];
 const ModalLocaleRoot = withLocale(({
   children
 }) => children);
@@ -196,10 +237,10 @@ const wrapCustomGetContainer$2 = customGetContainer => {
   }
   return () => customGetContainer;
 };
-const VIEWPORT_EXAMPLE_SELECTORS$3 = ['.example-driver-device-scroll'];
+const VIEWPORT_EXAMPLE_SELECTORS$4 = ['.example-driver-device-scroll'];
 const viewportPopupMountOptions$3 = {
   cover: 'viewport',
-  exampleSelectors: VIEWPORT_EXAMPLE_SELECTORS$3
+  exampleSelectors: VIEWPORT_EXAMPLE_SELECTORS$4
 };
 const resolveModalGetContainer = ({
   customGetContainer,
@@ -223,6 +264,7 @@ const resolveModalGetContainer = ({
   };
 };
 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`;
@@ -268,11 +310,15 @@ const ModalOuter = ({
   });
   const bodyClassName = classnames(modalStyle['modal-body'], 'modal-body');
   // 移动端全屏：body 用 flex 吃满 title/footer 之间剩余高度，footer 才能贴底；
-  // 勿写死 --kne-modal-body-height（高度受限类会把该值压矮，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)'
   };
@@ -302,10 +348,7 @@ const ModalOuter = ({
       children: bodyInner
     }) : /*#__PURE__*/jsx("div", {
       className: classnames(bodyClassName, modalStyle['body-scroll-off']),
-      style: isMobile ? {
-        flex: '1 1 auto',
-        minHeight: 0
-      } : undefined,
+      style: bodyStyle,
       children: bodyInner
     }), footer === null && footerButtons === undefined ? null : /*#__PURE__*/jsx(Footer, {
       footer: footer,
@@ -346,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
@@ -428,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({})
+      })
     })
   });
 };
@@ -439,18 +485,23 @@ const Modal = withLocale(_ref2 => {
       getContainer,
       open,
       mobileFullscreen = true,
-      bodyScroll = true
+      bodyScroll = true,
+      isMobile: isMobileProp,
+      fixedModeClass: fixedModeClassProp
     } = _ref2,
     props = _objectWithoutPropertiesLoose(_ref2, _excluded3$1);
   const hostRef = useRef(null);
   const {
-    isMobile,
-    fixedModeClass,
+    isMobile: detectedIsMobile,
+    fixedModeClass: detectedFixedModeClass,
     getPopupContainer,
     anchorRef
   } = usePopupMount(_extends({}, viewportPopupMountOptions$3, {
     getPopupContainer: wrapCustomGetContainer$2(getContainer)
   }));
+  // useModal 打开时可能已按 activeElement 解析出示例手机框，优先用调用方传入的 isMobile / fixedModeClass
+  const isMobile = isMobileProp != null ? isMobileProp : detectedIsMobile;
+  const fixedModeClass = fixedModeClassProp != null ? fixedModeClassProp : detectedFixedModeClass;
   const getScrollElement = useScrollElement();
   useLockParentScroll(!!open, getScrollElement);
   const setAnchorRef = node => {
@@ -480,77 +531,138 @@ const Modal = withLocale(_ref2 => {
     }))]
   });
 });
-const useModal = () => {
-  const {
-    modal
-  } = App.useApp();
+
+const _excluded$6 = ["afterClose", "onClose", "onConfirm", "onCancel"],
+  _excluded2$3 = ["afterClose", "getContainer"];
+let hookModalUuid = 0;
+
+/** 与 Modal / useDrawer 一致：示例手机框挂载根 */
+const VIEWPORT_EXAMPLE_SELECTORS$3 = ['.example-driver-device-scroll'];
+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
-  } = usePopupMount(viewportPopupMountOptions$3);
+      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。
+ *
+ * 打开时用 document.activeElement 解析示例手机框（与 useDrawer 一致），
+ * 使 useFormModal 在手机预览内也能挂进 `.example-driver-device-scroll`，
+ * 而不是落到 Global Holder 所在的外层 body。
+ */
+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(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,
+          getContainer: customGetContainer
+        } = props,
+        restProps = _objectWithoutPropertiesLoose(props, _excluded2$3);
+
+      // Holder 在 Global 外层；用点击焦点定位示例手机框（对齐 useDrawer / FileModal）
+      const openAnchor = typeof document !== 'undefined' ? document.activeElement : null;
+      const exampleMount = findExamplePhoneMountNode(openAnchor, VIEWPORT_EXAMPLE_SELECTORS$3);
+      const examplePhoneProps = exampleMount && !customGetContainer ? {
+        getContainer: () => exampleMount,
+        isMobile: true,
+        fixedModeClass: 'kne-is-boundary'
+      } : customGetContainer ? {
+        getContainer: customGetContainer
+      } : {};
+      const modalEl = /*#__PURE__*/jsx(HookModal, {
+        ref: modalRef,
+        config: _extends({}, restProps, examplePhoneProps, {
+          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"};
@@ -884,17 +996,6 @@ 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'];
@@ -1212,41 +1313,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 = () => {
@@ -1369,5 +1475,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