@rc-component/dialog 1.8.2 → 1.8.4

package/es/Dialog/Content/Panel.js

@@ -40,7 +40,7 @@ const Panel = /*#__PURE__*/React.forwardRef((props, ref) => {
   } = React.useContext(RefContext);
   const internalRef = useRef(null);
   const mergedRef = useComposeRef(holderRef, panelRef, internalRef);
-  useLockFocus(visible && isFixedPos && focusTrap !== false, () => internalRef.current);
+  const [ignoreElement] = useLockFocus(visible && isFixedPos && focusTrap !== false, () => internalRef.current);
   React.useImperativeHandle(ref, () => ({
     focus: () => {
       internalRef.current?.focus({
@@ -122,7 +122,10 @@ const Panel = /*#__PURE__*/React.forwardRef((props, ref) => {
     className: clsx(prefixCls, className),
     onMouseDown: onMouseDown,
     onMouseUp: onMouseUp,
-    tabIndex: -1
+    tabIndex: -1,
+    onFocus: e => {
+      ignoreElement(e.target);
+    }
   }, /*#__PURE__*/React.createElement(MemoChildren, {
     shouldUpdate: visible || forceRender
   }, modalRender ? modalRender(content) : content));

package/es/Dialog/index.js

@@ -101,36 +101,26 @@ const Dialog = props => {
   }
 
   // >>> Content
-  const contentClickRef = useRef(false);
-  const contentTimeoutRef = useRef(null);
-
-  // We need record content click in case content popup out of dialog
-  const onContentMouseDown = () => {
-    clearTimeout(contentTimeoutRef.current);
-    contentClickRef.current = true;
-  };
-  const onContentMouseUp = () => {
-    contentTimeoutRef.current = setTimeout(() => {
-      contentClickRef.current = false;
-    });
-  };
+  const mouseDownOnMaskRef = useRef(false);
 
   // >>> Wrapper
   // Close only when element not on dialog
   let onWrapperClick = null;
   if (maskClosable) {
     onWrapperClick = e => {
-      if (contentClickRef.current) {
-        contentClickRef.current = false;
-      } else if (wrapperRef.current === e.target) {
+      if (wrapperRef.current === e.target && mouseDownOnMaskRef.current) {
         onInternalClose(e);
       }
     };
   }
+  function onWrapperMouseDown(e) {
+    mouseDownOnMaskRef.current = e.target === wrapperRef.current;
+  }
 
   // ========================= Effect =========================
   useEffect(() => {
     if (visible) {
+      mouseDownOnMaskRef.current = false;
       setAnimatedVisible(true);
       saveLastOutSideActiveElementRef();
 
@@ -143,11 +133,6 @@ const Dialog = props => {
       doClose();
     }
   }, [visible]);
-
-  // Remove direct should also check the scroll bar update
-  useEffect(() => () => {
-    clearTimeout(contentTimeoutRef.current);
-  }, []);
   const mergedStyle = {
     zIndex,
     ...wrapStyle,
@@ -176,11 +161,10 @@ const Dialog = props => {
     className: clsx(`${prefixCls}-wrap`, wrapClassName, modalClassNames?.wrapper),
     ref: wrapperRef,
     onClick: onWrapperClick,
+    onMouseDown: onWrapperMouseDown,
     style: mergedStyle
   }, wrapProps), /*#__PURE__*/React.createElement(Content, _extends({}, props, {
     isFixedPos: isFixedPos,
-    onMouseDown: onContentMouseDown,
-    onMouseUp: onContentMouseUp,
     ref: contentRef,
     closable: closable,
     ariaId: ariaId,

package/lib/Dialog/Content/Panel.js

@@ -49,7 +49,7 @@ const Panel = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
   } = _react.default.useContext(_context.RefContext);
   const internalRef = (0, _react.useRef)(null);
   const mergedRef = (0, _ref.useComposeRef)(holderRef, panelRef, internalRef);
-  (0, _focus.useLockFocus)(visible && isFixedPos && focusTrap !== false, () => internalRef.current);
+  const [ignoreElement] = (0, _focus.useLockFocus)(visible && isFixedPos && focusTrap !== false, () => internalRef.current);
   _react.default.useImperativeHandle(ref, () => ({
     focus: () => {
       internalRef.current?.focus({
@@ -131,7 +131,10 @@ const Panel = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
     className: (0, _clsx.clsx)(prefixCls, className),
     onMouseDown: onMouseDown,
     onMouseUp: onMouseUp,
-    tabIndex: -1
+    tabIndex: -1,
+    onFocus: e => {
+      ignoreElement(e.target);
+    }
   }, /*#__PURE__*/_react.default.createElement(_MemoChildren.default, {
     shouldUpdate: visible || forceRender
   }, modalRender ? modalRender(content) : content));

package/lib/Dialog/index.js

@@ -110,36 +110,26 @@ const Dialog = props => {
   }
 
   // >>> Content
-  const contentClickRef = (0, _react.useRef)(false);
-  const contentTimeoutRef = (0, _react.useRef)(null);
-
-  // We need record content click in case content popup out of dialog
-  const onContentMouseDown = () => {
-    clearTimeout(contentTimeoutRef.current);
-    contentClickRef.current = true;
-  };
-  const onContentMouseUp = () => {
-    contentTimeoutRef.current = setTimeout(() => {
-      contentClickRef.current = false;
-    });
-  };
+  const mouseDownOnMaskRef = (0, _react.useRef)(false);
 
   // >>> Wrapper
   // Close only when element not on dialog
   let onWrapperClick = null;
   if (maskClosable) {
     onWrapperClick = e => {
-      if (contentClickRef.current) {
-        contentClickRef.current = false;
-      } else if (wrapperRef.current === e.target) {
+      if (wrapperRef.current === e.target && mouseDownOnMaskRef.current) {
         onInternalClose(e);
       }
     };
   }
+  function onWrapperMouseDown(e) {
+    mouseDownOnMaskRef.current = e.target === wrapperRef.current;
+  }
 
   // ========================= Effect =========================
   (0, _react.useEffect)(() => {
     if (visible) {
+      mouseDownOnMaskRef.current = false;
       setAnimatedVisible(true);
       saveLastOutSideActiveElementRef();
 
@@ -152,11 +142,6 @@ const Dialog = props => {
       doClose();
     }
   }, [visible]);
-
-  // Remove direct should also check the scroll bar update
-  (0, _react.useEffect)(() => () => {
-    clearTimeout(contentTimeoutRef.current);
-  }, []);
   const mergedStyle = {
     zIndex,
     ...wrapStyle,
@@ -185,11 +170,10 @@ const Dialog = props => {
     className: (0, _clsx.clsx)(`${prefixCls}-wrap`, wrapClassName, modalClassNames?.wrapper),
     ref: wrapperRef,
     onClick: onWrapperClick,
+    onMouseDown: onWrapperMouseDown,
     style: mergedStyle
   }, wrapProps), /*#__PURE__*/React.createElement(_Content.default, _extends({}, props, {
     isFixedPos: isFixedPos,
-    onMouseDown: onContentMouseDown,
-    onMouseUp: onContentMouseUp,
     ref: contentRef,
     closable: closable,
     ariaId: ariaId,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rc-component/dialog",
-  "version": "1.8.2",
+  "version": "1.8.4",
   "description": "dialog ui component for react",
   "keywords": [
     "react",
@@ -51,7 +51,7 @@
   "dependencies": {
     "@rc-component/motion": "^1.1.3",
     "@rc-component/portal": "^2.1.0",
-    "@rc-component/util": "^1.7.0",
+    "@rc-component/util": "^1.9.0",
     "clsx": "^2.1.1"
   },
   "devDependencies": {
@@ -87,4 +87,4 @@
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0"
   }
-}
+}