@sheinx/base 3.9.8-beta.10 → 3.9.8-beta.11

package/cjs/modal/modal-content.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"modal-content.d.ts","sourceRoot":"","sources":["modal-content.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAkF9D,QAAA,MAAM,KAAK,UAAW,iBAAiB,mDAmatC,CAAC;AAEF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"modal-content.d.ts","sourceRoot":"","sources":["modal-content.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAkF9D,QAAA,MAAM,KAAK,UAAW,iBAAiB,mDAsbtC,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/cjs/modal/modal-content.js

@@ -85,6 +85,8 @@ var Modal = function Modal(props) {
   var _props$jssStyle, _props$jssStyle$modal;
   var modalClasses = (_props$jssStyle = props.jssStyle) === null || _props$jssStyle === void 0 || (_props$jssStyle$modal = _props$jssStyle.modal) === null || _props$jssStyle$modal === void 0 ? void 0 : _props$jssStyle$modal.call(_props$jssStyle);
   var panelRef = (0, _react.useRef)(null);
+  var wrapperRef = (0, _react.useRef)(null);
+  var popupCtx = (0, _react.useContext)(_hooks.popupContext);
   var isPositionX = ['left', 'right'].includes(props.position || '');
   var isPositionY = ['top', 'bottom'].includes(props.position || '');
   var defaultWidth = isPositionX ? 'auto' : 500;
@@ -298,6 +300,22 @@ var Modal = function Modal(props) {
     }
   }, [props.setInnerClose]);
 
+  // 将 Modal 的 ref 注册到父 Popover 的 chain 中，防止点击 Modal 时关闭 Popover
+  (0, _react.useLayoutEffect)(function () {
+    // Modal 显示或关闭动画播放期间，都需要在 chain 中
+    if (wrapperRef.current) {
+      if (visible) {
+        popupCtx.bindChild(wrapperRef);
+      } else {
+        popupCtx.removeChild(wrapperRef);
+      }
+    }
+    return function () {
+      // 确保清理时移除
+      popupCtx.removeChild(wrapperRef);
+    };
+  }, [visible]);
+
   // render
   var renderIcon = function renderIcon(isEmptyTitle) {
     var iconRoot = (0, _classnames.default)(modalClasses === null || modalClasses === void 0 ? void 0 : modalClasses.headerIcon, isEmptyTitle && (modalClasses === null || modalClasses === void 0 ? void 0 : modalClasses.emptyIcon));
@@ -426,6 +444,7 @@ var Modal = function Modal(props) {
   context.content = content;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_formFooterContext.FormFooterProvider, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      ref: wrapperRef,
       onClick: function onClick(e) {
         e.stopPropagation();
       },

package/esm/modal/modal-content.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"modal-content.d.ts","sourceRoot":"","sources":["modal-content.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAkF9D,QAAA,MAAM,KAAK,UAAW,iBAAiB,mDAmatC,CAAC;AAEF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"modal-content.d.ts","sourceRoot":"","sources":["modal-content.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAkF9D,QAAA,MAAM,KAAK,UAAW,iBAAiB,mDAsbtC,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/esm/modal/modal-content.js

@@ -11,13 +11,14 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import classNames from 'classnames';
-import React, { useRef, useEffect, useState, useMemo } from 'react';
+import React, { useRef, useEffect, useState, useMemo, useContext, useLayoutEffect } from 'react';
 import AlertIcon, { AlertIconMap } from "../alert/alert-icon";
 import Icons from "../icons";
 import { util } from '@sheinx/hooks';
 import { create } from '@shined/reactive';
 import { useDragMove, useDragResize, usePersistFn, useRender } from '@sheinx/hooks';
 import { FormFooterProvider } from "../form/form-footer-context";
+import { popupContext } from '@sheinx/hooks';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -79,6 +80,8 @@ var Modal = function Modal(props) {
   var _props$jssStyle, _props$jssStyle$modal;
   var modalClasses = (_props$jssStyle = props.jssStyle) === null || _props$jssStyle === void 0 || (_props$jssStyle$modal = _props$jssStyle.modal) === null || _props$jssStyle$modal === void 0 ? void 0 : _props$jssStyle$modal.call(_props$jssStyle);
   var panelRef = useRef(null);
+  var wrapperRef = useRef(null);
+  var popupCtx = useContext(popupContext);
   var isPositionX = ['left', 'right'].includes(props.position || '');
   var isPositionY = ['top', 'bottom'].includes(props.position || '');
   var defaultWidth = isPositionX ? 'auto' : 500;
@@ -292,6 +295,22 @@ var Modal = function Modal(props) {
     }
   }, [props.setInnerClose]);
 
+  // 将 Modal 的 ref 注册到父 Popover 的 chain 中，防止点击 Modal 时关闭 Popover
+  useLayoutEffect(function () {
+    // Modal 显示或关闭动画播放期间，都需要在 chain 中
+    if (wrapperRef.current) {
+      if (visible) {
+        popupCtx.bindChild(wrapperRef);
+      } else {
+        popupCtx.removeChild(wrapperRef);
+      }
+    }
+    return function () {
+      // 确保清理时移除
+      popupCtx.removeChild(wrapperRef);
+    };
+  }, [visible]);
+
   // render
   var renderIcon = function renderIcon(isEmptyTitle) {
     var iconRoot = classNames(modalClasses === null || modalClasses === void 0 ? void 0 : modalClasses.headerIcon, isEmptyTitle && (modalClasses === null || modalClasses === void 0 ? void 0 : modalClasses.emptyIcon));
@@ -420,6 +439,7 @@ var Modal = function Modal(props) {
   context.content = content;
   return /*#__PURE__*/_jsx(FormFooterProvider, {
     children: /*#__PURE__*/_jsx("div", {
+      ref: wrapperRef,
       onClick: function onClick(e) {
         e.stopPropagation();
       },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sheinx/base",
-  "version": "3.9.8-beta.10",
+  "version": "3.9.8-beta.11",
   "description": "",
   "keywords": [],
   "license": "MIT",
@@ -10,7 +10,7 @@
   "module": "./esm/index.js",
   "typings": "./cjs/index.d.ts",
   "dependencies": {
-    "@sheinx/hooks": "3.9.8-beta.10",
+    "@sheinx/hooks": "3.9.8-beta.11",
     "immer": "^10.0.0",
     "classnames": "^2.0.0",
     "@shined/reactive": "^0.3.3"